DataTables

by mattography

HTML

<script src="https://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/plug-ins/725b2a2115b/integration/jqueryui/dataTables.jqueryui.css">
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.css">
<script src="//cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<body id="dt_example">
      <table cellpadding="0" cellspacing="0" border="0" class="display" id="example1">
        <thead>
          <tr>
          <th>Name</th>
          <th>Host Name</th>
          <th>Port</th>
          <th>User Name</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            </tr>
        </tfoot>
      </table>
   
  </body>

CSS

div.dataTables_length label {
  width: 460px;
  float: left;
  text-align: left;
 }
  
 div.dataTables_length select {
   width: 75px;
}
 
 div.dataTables_filter label {
   float: right;
 }
  
 .dataTables_info {
     padding-top: 8px;
 }
  
 .dataTables_paginate {
     float: right;
     margin: 0;
 }
  
 table {
     margin: 1em 0;
     clear: both;
 }

JavaScript

$(document).ready(function() {

    var iTotal = [0, 0, 0];

    var oTable1 = $('#example1').dataTable({
        "deferRender": true,
        "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
        "pagingType": "full_numbers",
        "table-layout": "fixed",
        "oLanguage": {
            "sZeroRecords": "Either no data available, or your change your search criteria"
        
        },
        "bPaginate": false,
        "bLengthChange": false,
        "bFilter": true,
        "bSort": true,
        "bInfo": false,
        "bAutoWidth": true,
        "aaSorting": [[0, "asc"]],
        
        "aaData": [
                   {"name": "host1","hostname": "nessus-ntp.lab.com","port": "1241","username": "toto"},
                   {"name": "host2","hostname": "nessus-xml.lab.com","port": "20","username": "admin"},
                  ],
        "aoColumns": [{
            "mData": "name"},
        {
            "mData": "hostname"},
        {
            "mData": "port"},
        {
            "mData": "username"}
        ]
    });
});