Archive

Archive for March, 2011

jqGrid =TableSoter+Pager+Filter+Colorize UI plugins !!

March 19, 2011 Leave a comment
Recently in one of the projects, client requirement was to represent the huge data in a very dynamic interactive table view. Even though jqGrid was my first choice, it was bit complicated to incorporate all the html formatting rules inside the logic.jqGrid definitely has tons of built-in features, but the UI customization is not easy to implement and it has lots of rendering issues.

The solution I adapted was using the combination of jQuery plugins – Table Sorter,Pager, Filter and Colorize.  By interconnecting those plug-ins, application could get the exact similar grid view with sorting, paging and searching capabilities as well as dynamic formatting.

Sample Call:

$(document).ready(function() {
$(window).load(function(){
$(“#rptTable”).tablesorter({
widthFixed: false, widgets: [‘zebra’] <– Provide Default Sort_Order here –>})
.tablesorterPager({container: $(“#pager”),positionFixed : false})
.tablesorterFilter({ filterContainer: $(“#searchFilter”),
filterClearContainer: $(“#filterClearOne”),
filterColumns: [0, 1, 2, 3, 4, 5, 6,7,8,9,10,11],
filterCaseSensitive: false
}).colorize;
$(“#header”).click(function() {
$(“#first”).click();
});
});
});

Used jQuery plug-ins:
(1) jQuery TableSorter-2.0.3
(2) jQuery Metadata
(3) jQuery Colorize
(4) jQuery Pager

Note: With the new version of jqGrid 3.5, external css files can be called.

Categories: jQuery Tags: ,