jump to navigation

Enhancing HTML Tables Using The jQuery DataTables plug-in January 31, 2012

Posted by Tournas Dimitrios in JQuery.

Presenting data in the form of HTML-tables is a common practice in web applications . Sorting , searching and / or paginating data of tables will make visitor’s experience more pleasant . It always impresses me that whenever I want to implement a specific functionality client-side (JQuery)  , there is usually a plugin available that utilizes exactly or close to what I need .  This article will present JQuery’s Data-table plugin , it’s IMO the best available plugin that implements sorting – searching and paginating just is one line of code . One of the best ways of learning how to do anything new (including software APIs!) is to get your hands dirty as quickly as possible .The official webpage has lot of examples that could magnetize your interest for a whole weekend . Let’s start with the basics …..

First , get a copy of the plugin and place it into your server’s  library folder (I’ll skip the steps of including JQuery and DataTable plugin into the webpage  ) . Setting up DataTables involves setting up a HTML-table so that it has distinct < thead > and < tbody > sections , and then simply running dataTable() on it . As a reminder , HTML-tables have a header and a body section , the thead and tbody tags are optional according to the w3-specifications , but the DataTables plugin requeres that you put them in , so that it knows what to work with . A basic example could be as follows :

$(document).ready(function() {
} );

The jQuery DataTables plug-in can be configured by passing the various options in the initialization call (only some of the configuration parameters will be presented on this articles ) . The default functionalities can be easily disabled if some of them are not required . The following listing shows configuration that can be used in order to disable default features :

$('#example').dataTable( {
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": false,
    "bSort": false,
    "bInfo": false,
    "bAutoWidth": false,
"asStripClasses": null //To remove "odd"/"event" zebra classes
} );

For a quick  reference of initialisation options and API methods , details of each option , including code samples , visit the API reference list . There are also a number of API plug-ins and Extras which extend the capabilities of DataTables . If you don’t see what you are looking for in the API reference list , it is possible that a plug-in has implemented the functionality you need .

See a live demo  on this link or download  the complete source code of this article . Happy coding🙂


No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s