Does anyone know of a way to set up jqGrid to use a numeric pager?
Instead of Page 1 of 20, I want to have the paging be like 1,2,3,4 > >> and when I click on 4 it would something like << < 4,5,6,7 > >>
I've seen how other grids do it, but I can't seem to find a built in way for jqGrid to do it. I may have a way to implement it, but I don't want to reinvent the wheel if there is something already out there. It would involve me adding custom buttons after getting userdata from the grid's data to determine the pages available.
Telerik's grid does it (http://demos.telerik.com/aspnet-mvc/grid).
The Navigation Bar, also known as the pager, is enabled by placing a <div> right after the <table> definition in your HTML . Note that it is a <div>, not a <table>. Then, you identify the <div> to your grid by placing the name of the div in the grid setting called “pager”. jQuery("#grid_id").
If you use loadonce:true jqGrid change the datatype parameters to 'local' after the first load of data from the grid. All next grid reloading (sorting, paging, filtering) works local. If you want refresh the grid data from the server one more time you should set datatype to its original value ('json' or 'xml').
Ohhh! During I wrote the code firegnom posted another implementation. Nevertheless better two working versions as no one.
I made small demo which demonstrate how the behavior with links in the pager can be implemented. I made the code so, that it can display the pager either in the form
(if pginput: false
parameter of jqGrid are used) or in the form
In both cases the current page will not displayed in the list. How one can see I inserted the underlined style for the links. If you don't like it you should remove
td.myPager a { text-decoration:underline !important }
from the demo. The working live demos you can see here and here.
The corresponding JavaScript code is full inside of loadComplete
event handler:
loadComplete: function() {
var i, myPageRefresh = function(e) {
var newPage = $(e.target).text();
grid.trigger("reloadGrid",[{page:newPage}]);
e.preventDefault();
};
$(grid[0].p.pager + '_center td.myPager').remove();
var pagerPrevTD = $('<td>', { class: "myPager"}), prevPagesIncluded = 0,
pagerNextTD = $('<td>', { class: "myPager"}), nextPagesIncluded = 0,
totalStyle = grid[0].p.pginput === false,
startIndex = totalStyle? this.p.page-MAX_PAGERS*2: this.p.page-MAX_PAGERS;
for (i=startIndex; i<=this.p.lastpage && (totalStyle? (prevPagesIncluded+nextPagesIncluded<MAX_PAGERS*2):(nextPagesIncluded<MAX_PAGERS)); i++) {
if (i<=0 || i === this.p.page) { continue; }
var link = $('<a>', { href:'#', click:myPageRefresh });
link.text(String(i));
if (i<this.p.page || totalStyle) {
if (prevPagesIncluded>0) { pagerPrevTD.append('<span>, </span>'); }
pagerPrevTD.append(link);
prevPagesIncluded++;
} else {
if (nextPagesIncluded>0 || (totalStyle && prevPagesIncluded>0)) { pagerNextTD.append('<span>, </span>'); }
pagerNextTD.append(link);
nextPagesIncluded++;
}
}
if (prevPagesIncluded > 0) {
$(grid[0].p.pager + '_center td[id^="prev"]').after(pagerPrevTD);
}
if (nextPagesIncluded > 0) {
$(grid[0].p.pager + '_center td[id^="next"]').before(pagerNextTD);
}
}
where grid
and MAX_PAGERS
are defined as
var grid = $("#list"), MAX_PAGERS = 2;
as far as i know there is no solution for that in jquery and you have to do it yourself . below i have working code for the pager :
function jqgridCreatePager(pagernav,navgrid,pages){
$('#'+pagernav+' #'+pagernav+'_center td:has(input)').attr('id','pager');
var td = $('#'+pagernav+' #'+pagernav+'_center #pager').html('');
var page = parseInt(jQuery("#"+navgrid).jqGrid('getGridParam','page'))
var lastPage = parseInt(jQuery("#"+navgrid).jqGrid('getGridParam','lastpage'))
text='';
if(page-pages > 1){
text+=jqgridCreatePageLink(navgrid,1)
text+= ' ... '
}
for(var i=0;i <pages;i++){
if(page-pages+i >=1)
text+=jqgridCreatePageLink(navgrid,page-pages+i)
}
text +=jqgridCreatePageLink(navgrid,page,true);
for(var i=0;i <pages;i++){
if(page+i+1 <= lastPage)
text +=jqgridCreatePageLink(navgrid,page+i+1)
}
if(page+pages <= lastPage){
text+= ' ... '
text+=jqgridCreatePageLink(navgrid,lastPage)
}
var td = $('#'+pagernav+' #'+pagernav+'_center #pager').html(text);
}
and function which is making links
function jqgridCreatePageLink(navgrid,page,current){
if (!current)
return ' <a href="#" onclick="jQuery(\'#'+navgrid+'\').jqGrid(\'setGridParam\',{page:'+page+'}).trigger(\'reloadGrid\')">'+page+'</a> ';
return ' >'+page+'< '
}
now to integrate this code with grid just add it when grid is created gridComplete event or something like that:
//create
jqgridCreatePager('yourGridNavigator','yourGrid',3)
and also attach it to onPage event
//onPage
jqgridCreatePager('yourGridNavigator','yourGrid',3)
to prevent flickering just add to your css
#yourGridNavigator_center{
display:none;
}
and again on gridComplete just add
$('#yourGridNavigator_center').show();
as to the function patrameters:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With