DataTables

DataTables Examples

HTML

<title>Example 1 - apply dataTable()</title>

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">


<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>


<body>
  <div class="container">

    <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
      <thead>
        <tr>
          <th class='no-sort'><input type="checkbox" name="select_all" value="1" id="select-all"></th>
          <th>Rendering engine</th>
          <th>Browser</th>
          <th>Platform(s)</th>
          <th>Engine version</th>
          <th>CSS grade</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" name="manuf[]" class="sub_chk" data-id="<?php echo $data->id; ?>"></td>
          <td>Trident</td>
          <td>Internet
            Explorer 4.0</td>
          <td>Win 95+</td>
          <td> 4</td>
          <td>X</td>
        </tr>
        <tr>
          <td><input type="checkbox" name="manuf[]" class="sub_chk" data-id="<?php echo $data->id; ?>"></td>
          <td>Trident</td>
          <td>Internet
            Explorer 5.0</td>
          <td>Win 95+</td>
          <td>5</td>
          <td>C</td>
        </tr>
        <tr>
          <td><input type="checkbox" name="manuf[]" class="sub_chk" data-id="<?php echo $data->id; ?>"></td>
          <td>Trident</td>
          <td>Internet
            Explorer 5.5</td>
          <td>Win 95+</td>
          <td>5.5</td>
          <td>A</td>
        </tr>
        <tr>
          <td><input type="checkbox" name="manuf[]" class="sub_chk" data-id="<?php echo...

JavaScript

$(document).ready(function() {
  $('#example').dataTable( {"sPaginationType": "full_numbers",
                            "aoColumnDefs": [
                              { 'bSortable': false, 'aTargets': [0] }
                            ]
                           });

  $('#select-all').on('click', function(e) {
    e.preventDefault();

    $(".sub_chk").prop('checked', $(this).is(':checked'));  
  });
});