The jQuery plugin Datatable is a plugin that will allow you to have many features on a HTML table. This plugin is so simple to use, but if you need more complex thing you can also achieve them since the plugin is full of features that can be customize, it also includes an event listener for the action on the table.
Among the features of the Datatable plugin you can have:
- Pagination, instant search and multi-column ordering
Supports almost any data source:
DOM, Javascript, Ajax and server-side processing - Easily theme-able: DataTables, jQuery UI, Bootstrap, Foundation
- Wide variety of extensions inc. Editor, TableTools, FixedColumns and more
- Extensive options and a beautiful, expressive API
- Fully internationalisable
- Professional quality: backed by a suite of 2900+ unit tests
- Free open source software (MIT license)! Commercial support available.
- Scrolling options for table viewport
- Smart handling of column widths
- State saving
- Hidden columns
- Dynamic creation of tables
- Ajax auto loading of data
- Custom DOM positioning
- Single column filtering
- Alternative pagination types
- Non-destructive DOM interaction
- Sorting column(s) highlighting
- Advanced data source options
- Commercial support available
- Fully accessible for screenreaders / keyboard access
- Sensible file size: 78K minified, 26K gzip’d
- Extensive plug-in support
Sorting, type detection, API functions, pagination and filtering - Solid documentation and interface reference
- 130+ pre-built examples
This list of feature was taken directly from their site.
I have implemented this plugin in some of the developments that I have. I will not teach you on this time how to use it but I will drop how you can use it right away.
So suppose that you have a HTML table with an ID databaseResults, To apply the plugin to your table just do this:
| 1 2 3 | $(document).ready(function(){ $('#databaseResults').DataTable(); }); |
By applying that jQuery code to your table you are on business. Although this is the most simple example, on a real application you will need to custom and tweak the plugin to fit your needs. I say tweak because you have to work directly with plugin API.
One more interesting thing is that you can integrate this plugin with the jQuery Themes and Bootstrap.
If you have a comment about this plugin feel free to leave it.