Add numeric pager to jqGrid

Question

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).

Answer 1

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>,&nbsp;</span>'); }
            pagerPrevTD.append(link);
            prevPagesIncluded++;
        } else {
            if (nextPagesIncluded>0 || (totalStyle && prevPagesIncluded>0)) { pagerNextTD.append('<span>,&nbsp;</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;

Answer 2

And here's one more possible solution.

It replaces the paging textbox with a list of links.

loadComplete: function() {
    var grid = this;
    var container = jQuery("#prev_jqGridTablePager").next().next();
    jQuery(container).html('');

    var totalPages = grid.p.lastpage;
    for (var i = 1; i <= totalPages; i++) {
        if (i == grid.p.page) {
            jQuery(container).append("<span class='pagination current'>" + i + "</span>");
        } else {
            jQuery(container).append("<a class='pagination' href='javascript: void(0)'>" + i + "</a>");
        }
    }

    jQuery(container).find("a.pagination").click(function(e) {
        e.preventDefault();

        var newPage = jQuery(this).text();
        jQuery(grid).trigger("reloadGrid", [{ page: newPage }]);
    });
}

Answer 3

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:

• first is your grid navigator id
• second is your grid id
• this third parameter of the function is how many pages should be displayed before and after current page