jQuery DataTables in ASP.NET MVC

This article explains jQuery DataTables in ASP.NET MVC. jQuery DataTable plugin has good performance if an application renders thousands of records on a web page.

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

  1. 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.

  2. 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.

  3. 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

  4. 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.

  5. 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.