Examples Downloads

DataTables

DataTables is a highly flexible jQuery plug-in based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table.

Please refer to DataTables Documentation to learn about plugin options

jQuery users
Step one

Include the plugin stylesheet jquery.dataTables.css and other extensions inside the <head>. Please view Stylesheet inclusion guideline rules

<link type="text/css" rel="stylesheet" href="assets/plugins/datatables/css/datatables.min.css">
Step two

Include the plugin javascript and extension files inside the <body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules 

<script type="text/javascript" src="assets/plugins/datatables/js/dataTables.min.js">
Step three

Create the markup for your table. You can also add Bootstrap table classes to customize the look

<table id="myDataTable" class="table table-hover" cellspacing="0"
            width="100%">
            <thead>
            <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            </tr>
            </thead>

            <tfoot>
            <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            </tr>
            </tfoot>

            <tbody>
            <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
            </tr>
            <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
            </tr>
            <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$86,000</td>
            </tr>
            <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$433,060</td>
            </tr>
            <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$162,700</td>
            </tr>
            <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$372,000</td>
            </tr>
            </tbody>
            </table>
Step four

Apply the plugin to your table.

<script>
            $(document).ready(function() {
            $('#myDataTable').DataTable();
            });
            </script>

Use any of the following pre-configured settings to get DataTables customized to match your purpose. For more advanced options please refer to DataTables Documentation

For more options and methods DataTables Documentation