How to improve html table using Jquery datatables plugin ?

Using a plain HTML table for displaying data is a common practice. It works fine as long as we don’t have many records and don’t want your user to manipulate your data. While displaying data, we don’t have searching, ordering, pagination etc. features in table. But when building a web application that serves hundreds of records in a table, searching or presentation of data within HTML tables suffers from great usability drawbacks.

We faced the same challenge for one of our clients Rubicon. They wanted an efficient way to represent the reporting data for their end users. We looked at solutions like jQuery DataTables which are very good solutions for reporting data in table. It always impresses us that whenever We need to do anything with jQuery Datatable, there are usually plugins available.The quantity and quality of free jQuery plugins simply never ceases to amaze me.

Implement searching, ordering, pagination features using jquery datatables plugin is no more difficult now

DataTables helps to represent data in table and provides features like searching, ordering, pagination etc. DataTables is a powerful jQuery plugin for creating table listings and adding interactions to them. DataTables has most features enabled by default, so all you need to do to use it.

DataTables can be initialized with a single line of Javascript

$('table').dataTable();

The datatable can be populated with static HTML data. But here to make it more generic I have populated the data from a generic handler with AJAX. AT the time of calling the data the following parameters will send the dynamic data to the Handler which will be used to populate the DataTable. Below is the code

$(document).ready(function () {
  $('#TableData').dataTable({
    "sPaginationType": "full_numbers",
    "bAutoWidth": false,
    "bFilter": true,
    "bServerSide": true,
    "bProcessing": true,
    "iDisplayStart": parseInt($('#hdDisplayStart').val()),
    "iDisplayLength": parseInt($('#hdDisplayLength').val()),
    "iSortCol_0": parseInt($('#hdSortColumnIndex').val()),
    "sSortDir_0": $('#hdSortingDirection').val()
  });
});

Parameters

Now here the variables defined by DataTable itself but the input values can be user defined…

bFilter a Visibility of the filter textbox.
bAutoWidth a Width of the datatable.
bProcessing a Showing Processing Image/Message while DataTable is loading.
sPaginationType a The type of pagination.
bServerSide a Server side Processing will be on
iDisplayStart a The starting position of the current page data.
iDisplayLength a The length of the current page data.
iSortCol_0 a The column number which will be used to sort.
sSortDir_0 a The direction of the sort.
sAjaxSource a The source path of the Handler / Web Method

Sample for Jquery datatables

We’ll create a listing of products in the Pragmaapps network. We’ll start with the listing of a few site names, and then we’ll add more columns and features. Here we have an HTML table with one column that lists the names of just three sites. Let’s see what DataTables can do with a minimal setup.

Plateform
Socialengine
Socialengine
Socialengine  ……………..
Socialengine
Socialengine

Products
SocialenginePress – Plugin for WordPress Product
SocialenginePress – Plugin for WordPress Blog	SocialenginePress – Plugin for WordPress Single Sign On	Socialengine Mobile Verification plugin(Anti-Spam)	Socialengine 2-Step Verification Plugin(Anti-Spam)

$(function(){ $(“#example”).dataTable(); })

Conclusion

With this most basic setup, we can search for site names from the top search box and sort them by clicking on the column name. This blog is going to help you in reducing the manual work with jQuery Datatable. Feel free to contact us if you have any further queries.