I found this great article about table sorting and paging using the jQuery library. I’ve updated it to work with jQuery 1.2.2. Which involves changing the .lt(n) and .gt(n) methods to the new .filter(‘:lt(n)’) method and a few other things.
The original article is well worth a read at:
http://www.packtpub.com/article/jquery-table-manipulation-part2.
/* -------------------------------------------------- Table sorting -------------------------------------------------- */ var alternateRowColors = function($table) { $('tbody tr:has(td):odd', $table).removeClass('alt').addClass('odd'); $('tbody tr:has(td):even', $table).removeClass('odd').addClass('alt'); }; $('table.sortable').each(function() { var $table = $(this); alternateRowColors($table); $table.find('th').each(function(column) { var findSortKey; if ($(this).is('.sort-numeric')) { findSortKey = function($cell) { var key = parseFloat($cell.text().replace(/^[^d.]*/, '')); return isNaN(key) ? 0 : key; }; } else if ($(this).is('.sort-date')) { findSortKey = function($cell) { return Date.parse('1 ' + $cell.text()); }; } else { //($(this).is('.sort-alpha')) { findSortKey = function($cell) { return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase(); }; } if (findSortKey) { $(this).addClass('clickable').hover( function() { $(this).addClass('hover'); } , function() { $(this).removeClass('hover'); } ) .click(function() { var newDirection = 1; if ($(this).is('.sorted-asc')) { newDirection = -1; } rows = $table.find('tbody > tr').get(); $.each(rows, function(index, row) { row.sortKey = findSortKey($(row).children('td').eq(column)); }); rows.sort(function(a, b) { if (a.sortKey b.sortKey) return newDirection; return 0; }); $.each(rows, function(index, row) { $table.children('tbody').append(row); row.sortKey = null; }); $table.find('th').removeClass('sorted-asc').removeClass('sorted-desc'); var $sortHead = $table.find('th').filter(':nth-child(' + (column + 1) + ')'); if (newDirection == 1) { $sortHead.addClass('sorted-asc'); } else { $sortHead.addClass('sorted-desc'); } $table.find('td').removeClass('sorted') .filter(':nth-child(' + (column + 1) + ')') .addClass('sorted'); alternateRowColors($table); $table.trigger('repaginate'); }); } }); }); /* -------------------------------------------------- Table paging -------------------------------------------------- */ $('table.paging').each(function() { var currentPage = 0; var numPerPage = 10; var $table = $(this); $table.bind('repaginate', function() { $table.find('tbody tr').show() .filter(':lt(' + currentPage * numPerPage + ')') .hide() .end() .filter(':gt(' + ((currentPage + 1) * numPerPage - 1) + ')') .hide() .end(); }); var numRows = $table.find('tbody tr').length; var numPages = Math.ceil(numRows / numPerPage); if (numPages > 1) { var $pager = $(''); //$('' + numRows + ' results found').appendTo($pager); $('
Hi,
I am trying to use paging in my Grid. I have used pager. It is not functioning properly and all the data is showd on a single page only.I
Please help me in paging of data.
Foolowing is the HTML code :-
————————–
jqGrid Demo
HTML {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 12px “Lucida Grande”, “Lucida Sans Unicode”, Tahoma, Verdana; OVERFLOW: auto; PADDING-TOP: 0px
}
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; FONT: 12px “Lucida Grande”, “Lucida Sans Unicode”, Tahoma, Verdana; OVERFLOW: auto; PADDING-TOP: 0px
}
<!– –>
<!– –>
<!– –>
jQuery(document).ready(function(){
jQuery(“#list2”).jqGrid({
url:’data.xml’,
datatype: ‘xml’,
colNames:[‘FieldName’,’ApplicableTo’,’select’,’Condition’,’Value’,’Column Name’,’SelectValue’,’ConditionValue’,’TableName’],
colModel:[{name:’FieldName’, index:’FieldName’, width:100},
{name:’ApplicableTo’, index:’ApplicableTo’, width:100 },
{name:’select’, index:’Select’, width:20 },
{name:’Condition’, index:’Condition’, width:100 },
{name:’Value’, index:’Value’, width:50 },
{name:’Column Name’, index:’ColumnName’, width:100 },
{name:’SelectValue’, index:’SelectValue’, width:50 },
{name:’ConditionValue’, index:’ConditionValue’, width:100},
{name:’TableName’, index:’TableName’, width:100}
],
pager: jQuery(‘#pager2’),
rowNum:10,
rowList:[10,20,30],
imgpath: ‘themes/sand/images’,
sortname: ‘id’,
viewrecords: true,
sortorder: “desc”,
caption: “Demo”,
xmlReader : {
root: “data”,
row: “row”,
repeatitems: true,
cell:”field”,
id: “id”
}
});
});
—————————————
XML file format is as follows :-
——————————–
Data<![CDATA[ ]]><![CDATA[ EqualsDatadataExists]]>Data1DataData
can you please mail me the working example of this?