Jquery has many excellent plugins to make user experience more intuitive and engaging. DataTables is a plugin which converts a standard HTML table into a robust, functional interface object which allows the user to sort, search, and page the data within the table with ease. This runs on the client side so the functionality provided doesn’t use up precious server resources, but instead offloads that to the client machine.

DataTables can be found at: https://datatables.net/

DataTables requires a properly formatted table. This means including the TABLE, THEAD, TR, TH, and TD tags at the minimum. The plugin will automatically use a set of defaults to setup the paging, sorting of columns, and searchable text.

DataTables has an optional include to make it responsive for mobiles devices as well as custom styling for different looks and feel.

Datatables provides style fixes to work well with both the Bootstrap and the Foundation frameworks. This helps overcome any style conflicts and makes for an easy implementation with these popular frameworks.

We use a jQuery selector and a call to the function “DataTable” to instantiate the functionality on a given table. This is the simplest implementation, more options can be provided with this instantiation to override the default values datatables uses when binding to a table. IT is generally a good idea to wrap this inside a document.ready function to ensure all required fiels have been included and the Document Object Model has finished being setup.


$(document).ready(function(){
$('#myTable').DataTable();
});