Why we chose this specific jQuery plug-in is that recently I incorporated this plug-in on one of the MVC 4 based web applications. That application had some performance issues with rendering the backend data using the HTML TR TD tags as a table format.
If the application tries to render more than 1000 records then we found it really degrades performance. So we decided to use an open-source jQuery plugin available in the market.
Then we found this jQuery Data Table plugin. Please find the following features of this plugin.
List of Features
- Installation is very simple
You can download the two files that are used to include this plug-in in your web application, you must refer to it from the CDN link or you can download both of the JavaScript and CSS files.
CDN link:
//cdn.datatables.net/1.10.7/css/jquery.dataTables.css
//code.jquery.com/jquery-1.10.2.min.js
//cdn.datatables.net/1.10.7/js/jquery.dataTables.js
jquery-1.10.2.min.js
Internally this plug-in is the jQuery plug-in.
jquery.dataTables.js
All the data table related API functions, methods, properties and events are available inside this file.
jquery.dataTables.css
All the Data table related styles are available inside the file, still you can customize this CSS file for your needs.
- Record processing modes
2.1 Client-side
You can do all the record manipulations, like sorting, paging, searching and so on. Everything you can do via the client-side and it will be processed in the browser.
2.2. Server-side
Using the Ajax request we can render this data table, each and every time the Ajax request has been made from the server side.
- Varieties of data sources
3.1. JavaScript arrays
You can use the JavaScript array data as the data source for this plug-in.
Example
![]()
Figure 1: JavaScript array
3.2. JavaScript Objects
You can use the JavaScript objects as the data source for this plug-in.
![]()
Figure 2: JavaScript Objects
3.3. JavaScript Instances
You can use the JavaScript instances as data source for this data table plug-in.
![]()
Figure 3: JavaScript Instances
- Built-in API support
You can find the full-featured API for creating and accessing Tables, Rows, Columns functions and also searching, filtering, paging, and so on. Still you can customize the existing API functions and you are able to create your custom API and include it in the existing plug-in.
Please refer the URL: http://datatables.net/manual/plug-ins/api#Registering-a-new-method.
- Extensions
5.1. AutoFill
Click and drag the cell content insertion and automatic incrementing of numeric columns. You can enable or disable this option on any column.
5.2. ColReorder
The end user can reorder the entire column data to the destination using just drag and drop options.
5.3. Editor
Provides the full support for inserting the new records and editing and also deleting. Inline editing and bubble editing.
5.4. Table tools
Provides a data export functionality, you can export the grid data into CSV, XLS or PDF.