Danoweb Jquery has many excellent plugins to make the 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 set up the paging, sorting of columns, and searchable text.
DataTables has an optional include to make it responsive for mobile 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 used by Datatables when binding to a table.
It is generally a good idea to wrap this inside a document.ready() function to ensure all required fields and elements have been included and the Document Object Model has finished being set up.
$(document).ready(function(){
$('#myTable').DataTable();
});
