DataTables is a jQuery plugin that adds interactive controls to an HTML table.
DataTables may be used for displaying large amounts of data across multiple columns, but it is suitable for any sized data set. DataTables will enable your tables to be viewable on mobile devices. It does this by hiding columns, starting from the right side, and showing them when you click on the arrow.
This shows a DataTable with the recommended options enabled: row limit, filter, pagination and current rows indicator.
Code<!-- Begin pattern: datatables //-->
<div id="example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer"><div class="row dt-pre"><div class="col-md-6"><div class="dt-title"></div><div class="dataTables_length" id="example_length"><label>Show <select name="example_length" aria-controls="example" class="form-control"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option><option value="-1">All</option></select> entries</label></div></div><div class="col-md-6 text-right"><div id="example_filter" class="dataTables_filter"><label>Filter <input type="search" class="form-control" placeholder="" aria-controls="example"></label></div></div></div><div class="row dt-table"><div class="col-sm-12"><table id="example" class="dataTable table table-hover table-primary dpl-form no-footer dtr-inline" role="grid" aria-describedby="example_info" style="width: 681px;">
<thead>
<tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="example" aria-label="Name: activate to sort column descending" rowspan="1" colspan="1" style="width: 122px;" aria-sort="ascending">Name</th><th class="sorting" tabindex="0" aria-controls="example" aria-label="Position: activate to sort column ascending" rowspan="1" colspan="1" style="width: 188px;">Position</th><th class="sorting" tabindex="0" aria-controls="example" aria-label="Office: activate to sort column ascending" rowspan="1" colspan="1" style="width: 88px;">Office</th><th class="sorting" tabindex="0" aria-controls="example" aria-label="Age: activate to sort column ascending" rowspan="1" colspan="1" style="width: 25px;">Age</th><th class="sorting" tabindex="0" aria-controls="example" aria-label="Start date: activate to sort column ascending" rowspan="1" colspan="1" style="width: 174px;">Start date</th><th class="sorting" tabindex="0" aria-controls="example" aria-label="Salary: activate to sort column ascending" rowspan="1" colspan="1" style="width: 72px;">Salary</th></tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="sorting_1" tabindex="0">Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>Friday 28 November 2008</td>
<td class="dt-body-right">£162,700</td>
</tr><tr role="row" class="even">
<td class="sorting_1" tabindex="0">Angelica Ramos</td>
<td>Chief executive officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>Friday 9 October 2009</td>
<td class="dt-body-right">£1,200,000</td>
</tr><tr role="row" class="odd">
<td class="sorting_1" tabindex="0">Ashton Cox</td>
<td>Junior technical author</td>
<td>San Francisco</td>
<td>66</td>
<td>Monday 12 January 2009</td>
<td class="dt-body-right">£86,000</td>
</tr><tr role="row" class="even">
<td class="sorting_1" tabindex="0">Bradley Greer</td>
<td>Software engineer</td>
<td>London</td>
<td>41</td>
<td>Saturday 13 October 2012</td>
<td class="dt-body-right">£132,000</td>
</tr><tr role="row" class="odd">
<td class="sorting_1" tabindex="0">Brenden Wagner</td>
<td>Software engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>Tuesday 7 June 2011</td>
<td class="dt-body-right">£206,850</td>
</tr><tr role="row" class="even">
<td class="sorting_1" tabindex="0">Brielle Williamson</td>
<td>Integration specialist</td>
<td>New York</td>
<td>61</td>
<td>Sunday 2 December 2012</td>
<td class="dt-body-right">£372,000</td>
</tr><tr role="row" class="odd">
<td class="sorting_1" tabindex="0">Bruno Nash</td>
<td>Software engineer</td>
<td>London</td>
<td>38</td>
<td>Tuesday 3 May 2011</td>
<td class="dt-body-right">£163,500</td>
</tr><tr role="row" class="even">
<td class="sorting_1" tabindex="0">Caesar Vance</td>
<td>Pre-sales support</td>
<td>New York</td>
<td>21</td>
<td>Monday 12 May 2011</td>
<td class="dt-body-right">£106,450</td>
</tr><tr role="row" class="odd">
<td class="sorting_1" tabindex="0">Cara Stevens</td>
<td>Sales assistant</td>
<td>New York</td>
<td>46</td>
<td>Tuesday 6 December 2011</td>
<td class="dt-body-right">£145,600</td>
</tr><tr role="row" class="even">
<td class="sorting_1" tabindex="0">Cedric Kelly</td>
<td>Senior JavaScript developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>Thursday 29 March 2012</td>
<td class="dt-body-right">£433,060</td>
</tr></tbody>
</table><div id="example_processing" class="dataTables_processing" style="display: none;">Loading...</div></div></div><div class="row dt-post"><div class="col-md-6"><div class="dataTables_paginate paging_simple_numbers" id="example_paginate"><ul class="pagination"><li class="paginate_button previous disabled" aria-controls="example" tabindex="0" id="example_previous"><a href="#">«</a></li><li class="paginate_button active" aria-controls="example" tabindex="0"><a href="#">1</a></li><li class="paginate_button " aria-controls="example" tabindex="0"><a href="#">2</a></li><li class="paginate_button " aria-controls="example" tabindex="0"><a href="#">3</a></li><li class="paginate_button " aria-controls="example" tabindex="0"><a href="#">4</a></li><li class="paginate_button " aria-controls="example" tabindex="0"><a href="#">5</a></li><li class="paginate_button " aria-controls="example" tabindex="0"><a href="#">6</a></li><li class="paginate_button next" aria-controls="example" tabindex="0" id="example_next"><a href="#">»</a></li></ul></div></div><div class="col-md-6 text-right"><div class="dataTables_info" id="example_info" role="status" aria-live="polite">1 to 10 of 57 rows</div></div></div></div>
<!-- End pattern: datatables //-->This shows the minimum options for a DataTable and must only be used when the table contains ten rows or fewer.
Code<!-- Begin pattern: datatables //-->
<div id="example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer"><div class="row dt-pre"><div class="col-md-6"><div class="dt-title"></div></div><div class="col-md-6 text-right"></div></div><div class="row dt-table"><div class="col-sm-12"><table id="example" class="dataTable-simplified table table-hover table-primary dpl-form dataTable no-footer dtr-inline" role="grid" aria-describedby="example_info" style="width: 475px;">
<thead>
<tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="example" aria-label="Name: activate to sort column descending" rowspan="1" colspan="1" style="width: 119px;" aria-sort="ascending">Name</th><th class="sorting" tabindex="0" aria-controls="example" aria-label="Position: activate to sort column ascending" rowspan="1" colspan="1" style="width: 188px;">Position</th><th class="sorting" tabindex="0" aria-controls="example" aria-label="Office: activate to sort column ascending" rowspan="1" colspan="1" style="width: 88px;">Office</th><th class="sorting" tabindex="0" aria-controls="example" aria-label="Salary: activate to sort column ascending" rowspan="1" colspan="1" style="width: 72px;">Salary</th></tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class="sorting_1" tabindex="0">Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td class="dt-body-right">£162,700</td>
</tr><tr role="row" class="even">
<td class="sorting_1" tabindex="0">Angelica Ramos</td>
<td>Chief executive officer (CEO)</td>
<td>London</td>
<td class="dt-body-right">£1,200,000</td>
</tr><tr role="row" class="odd">
<td class="sorting_1" tabindex="0">Ashton Cox</td>
<td>Junior technical author</td>
<td>San Francisco</td>
<td class="dt-body-right">£86,000</td>
</tr><tr role="row" class="even">
<td class="sorting_1" tabindex="0">Bradley Greer</td>
<td>Software engineer</td>
<td>London</td>
<td class="dt-body-right">£132,000</td>
</tr><tr role="row" class="odd">
<td class="sorting_1" tabindex="0">Brenden Wagner</td>
<td>Software engineer</td>
<td>San Francisco</td>
<td class="dt-body-right">£206,850</td>
</tr><tr role="row" class="even">
<td class="sorting_1" tabindex="0">Brielle Williamson</td>
<td>Integration specialist</td>
<td>New York</td>
<td class="dt-body-right">£372,000</td>
</tr><tr role="row" class="odd">
<td class="sorting_1" tabindex="0">Bruno Nash</td>
<td>Software engineer</td>
<td>London</td>
<td class="dt-body-right">£163,500</td>
</tr><tr role="row" class="even">
<td class="sorting_1" tabindex="0">Caesar Vance</td>
<td>Pre-sales support</td>
<td>New York</td>
<td class="dt-body-right">£106,450</td>
</tr><tr role="row" class="odd">
<td class="sorting_1" tabindex="0">Cara Stevens</td>
<td>Sales assistant</td>
<td>New York</td>
<td class="dt-body-right">£145,600</td>
</tr><tr role="row" class="even">
<td class="sorting_1" tabindex="0">Cedric Kelly</td>
<td>Senior JavaScript developer</td>
<td>Edinburgh</td>
<td class="dt-body-right">£433,060</td>
</tr></tbody>
</table><div id="example_processing" class="dataTables_processing" style="display: none;">Loading...</div></div></div><div class="row dt-post"><div class="col-md-6"></div><div class="col-md-6 text-right"></div></div></div>
<!-- End pattern: datatables //-->