alignment of table

sans · February 2016

how to resize or make your table compact so that even if the no. of columns goes on increasing , my table is still center aligned and adjusts on its own if the fields increase in case. plz tell me where in my code must i make the respective changes.

<html>
<head>
    <meta charset="utf-8">
    <!--<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">-->
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
    <title>Employee Details</title>
    <link rel="stylesheet" type="text/css" href="../../css_dt/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../../css_dt/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../../css_dt/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/editor.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
    <link rel="stylesheet" type="text/css" href="../resources/demo.css">
    <style type="text/css" class="init">
    
    </style>
    <script type="text/javascript" language="javascript" src="../../js_dt/jquery-1.12.0.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="../../js_dt/jquery.dataTables.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="../../js_dt/dataTables.buttons.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="../../js_dt/dataTables.select.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="../../js/dataTables.editor.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
    </script>
    <script type="text/javascript" language="javascript" src="../resources/demo.js">
    </script>
    <script type="text/javascript" language="javascript" src="../resources/editor-demo.js">
    </script>
    <script type="text/javascript" language="javascript" class="init">
    


var editor; // use a global for the submit and return data rendering in the examples
var p1="*";
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff_emp.php",
        
        table: "#example",
        fields: [{
                label: "Employee Id:"+p1.fontcolor("red"),
                name: "e_id"
            
            }, {
                label: "First name:"+p1.fontcolor("red"),
                name: "emp_fname"
            
            }, {
                label: "Last name:"+p1.fontcolor("red"),
                name: "emp_lname"
            }, {
                label: "Gender:"+p1.fontcolor("red"),
                name: "gender",
                type: "select",
                options: ["Male","Female"],
                def: "Male"
            },{
                label: "Employee Address:"+p1.fontcolor("red"),
                name: "emp_addr"
            },{
                label: "Email ID:",
                name: "emp_email_id"
            }, {
                label: "Contact No 1:"+p1.fontcolor("red"),
                name: "emp_contact_no1"
            }, {
                label: "Contact No 2:",
                name: "emp_contact_no2"
            }, {
                label: "Designation:"+p1.fontcolor("red"),
                name: "emp_desig"
            }, {
                label: "Date of Birth:"+p1.fontcolor("red"),
                name: "dob",
                type:  'datetime',
                def:   function () { return new Date(); }
            },{
                label: "Joining Date:"+p1.fontcolor("red"),
                name: "joining_date",
                type:  'datetime',
                def:   function () { return new Date(); }
            },{
                label: "Leaving Date:",
                name: "leave_date",
                type:  'datetime',
                def:   function () { return new Date(); }
            }

        ]
    } );
    
editor.field('e_id').input().on( 'change', function () {
  if ( editor.field('e_id').val().match("[(){}<>?=.*!@#$%^&*]")) /* === '' )*/ {
    editor.field('e_id').error('invalid');
  }
  else if ( editor.field('e_id').val() === '' ) {
    editor.field('e_id').error('required');
    }
  else {
    editor.field('e_id').error('');
  }
} );

    
    editor.field('emp_fname').input().on( 'change', function () {
  if ( editor.field('emp_fname').val().match("[0-9?=.*!@#$%^&*]")) /* === '' )*/ {
 //if ( editor.field('emp_fname').val().match("^[]")) /* === '' )*/ {
    editor.field('emp_fname').error('Please enter valid name !');
  }
  else if ( editor.field('emp_fname').val() === '' ) {
    editor.field('emp_fname').error('required');
    }
  else {
    editor.field('emp_fname').error('');
  }
  } );


editor.field('emp_lname').input().on( 'change', function () {
  if ( editor.field('emp_lname').val().match("[0-9?=.*!@#$%^&*]")) /* === '' )*/ {
    editor.field('emp_lname').error('Please enter valid name !');
  }
  else if ( editor.field('emp_lname').val() === '' ) {
    editor.field('emp_lname').error('required');
    }
  else {
    editor.field('emp_lname').error('');
  }
} );
editor.field('emp_addr').input().on( 'change', function () {
  if ( editor.field('emp_addr').val().match("[(){}<>?=*!@#$%^&*]")) /* === '' )*/ {
    editor.field('emp_addr').error('invalid');
  }
  else if ( editor.field('emp_addr').val() === '' ) {
    editor.field('emp_addr').error('required');
    }
  else {
    editor.field('emp_addr').error('');
  }
} ); 
editor.field('emp_contact_no1').input().on( 'change', function () {
  if ( editor.field('emp_contact_no1').val().match("[a-zA-Z(){}<>?=*!@#$%^&*]"))  {
    editor.field('emp_contact_no1').error('Please enter 10 digit number !');
  }
 else if ( editor.field('emp_contact_no1').val() === '' ) {
    editor.field('emp_contact_no1').error('required');
    }
  else {
    editor.field('emp_contact_no1').error('');
  }
} ); 
editor.field('emp_contact_no2').input().on( 'change', function () {
  if ( editor.field('emp_contact_no2').val().match("[a-zA-Z(){}<>?=*!@#$%^&*]")) /* === '' )*/ {
    editor.field('emp_contact_no2').error('Please enter 10 digit number !');
  }
  else {
    editor.field('emp_contact_no2').error('');
  }
} );
editor.field('emp_desig').input().on( 'change', function () {
  if ( editor.field('emp_desig').val().match("[0-9?=*_!@#$%^&*]")) /* === '' )*/ {
    editor.field('emp_desig').error('Please enter valid input!');
  }
  else if ( editor.field('emp_desig').val() === '' ) {
    editor.field('emp_desig').error('required');
    }
  else {
    editor.field('emp_desig').error('');
  }
} );


    $('#example').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.bubble( this );
    } );
    
    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "../php/staff_emp.php",
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            { data: "e_id" },
            {
                data: null,
                render: function ( data, type, row ) {
                    // Combine the first and last names into a single table field
                    return data.emp_fname+' '+data.emp_lname;
                },
                editField: ['emp_fname', 'emp_lname']
            },
            { data: "gender"},
            { data: "emp_addr"},
            { data: "emp_email_id" },
            { data: "emp_contact_no1" },
            { data: "emp_contact_no2" },
            { data: "emp_desig" },
            { data: "dob" },
            { data: "joining_date" },
            { data: "leave_date" },
        ],
        order: [ 1, 'asc' ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );



    </script>
</head>
<body class="dt-example">
    <div class="container">
        <section>
            <h1>Employee Inventory</span></h1>
            
            <table id="example" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th></th>
                        <th>Employee Id</th>
                        <th>Name</th>
                        <th>Gender</th>
                        <th>Employee Address</th>
                        <th>Email ID</th>
                        <th>Contact No 1</th>
                        <th>Contact No 2</th>
                        <th>Designation</th>
                        <th>Date of Birth</th>
                        <th>Joining Date</th>
                        <th>Leaving Date</th>
                    
                    </tr>
                </thead>
            </table>
            
            
        </section>
    </div>
    <section>
        <div class="footer">
            
            
                
                
        </div>
    </section>
</body>
</html>

alignment of table

alignment of table

Howdy, Stranger!

Categories

DataTables

alignment of table

alignment of table

Howdy, Stranger!

Quick Links

Categories

DataTables