Wednesday, July 11, 2012

jQuery - DataTables Plug-in

Received a request to have the tables sortable in the the web application that I'm working on. I looked around a bit to see what was available and decided to give DataTables a try. The first column in my table is fixed and contains links to actions (view and edit) so I'm using the FixedColumns plugin to hold the column in place while the remainder of the table is scrollable both horizontally and vertically.

So far it's been working very nicely but there were a couple of issues. The FixedColumns plugin wasn't setting the column width correctly for an empty table. That was fixed by setting the "iLeftWidth" property. I also needed to set it so that the first column could not sortable on. I found that the simplest way to do that was to use the "aoColumnDefs" property.

Here is my initialization script:

$(document).ready( function () {
 var oTable = $('#tableID').dataTable( {
 "aaSorting": [ [1, "asc"] ],
 "sScrollY": "600px",
 "sScrollX": "100%",
 "bScrollCollapse": true,
 "bStateSave": true,
 "bPaginate": false,
//make first column not sortable
 "aoColumnDefs": [{"bSortable": false, "aTargets": [0]}] 
 new FixedColumns( oTable, {
   "iLeftWidth": "100"

So far I'm very impressed by what this jQuery plug-in can do. I have noticed that the page load times have increase. Waiting to see if this will be an issue for the end users.

No comments:

Post a Comment

Thank you for commenting!