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

When you found that, Please inform us, so that we can also have the update. — Tareq, Apr 29 '11 at 06:04

score 12 · Accepted Answer · answered Apr 29 '11 at 17:55

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

enter image description here

(if pginput: false parameter of jqGrid are used) or in the form

enter image description here

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;

Nice work. Took a little tweaking to get it to work right, but this works great. This would be a cool built in feature for 4.1 — HapiDjus, May 02 '11 at 20:45
@HapiDjus: I find the solution not yet perfect. I don't know which is the best way to show the current page and the total number of pages in the new look. About the including of the feature in new vesrion of jqGrid. I am not the developer of jqGrid, so I have to influence to including of new features in the new release of jqGrid. If we find really good way to show the current page and the total number of pages I could post feature request with my code in the trirand forum, then the feature *could be* probably included in the next jqGrid release, but you can use the code in `loadComplete` now. — Oleg, May 03 '11 at 09:36
@HapiDjus: One more general remark. I see that you don't use "votes" any time. Starting with 15 points of reputation you have the right. [Here](http://stackoverflow.com/faq#howtoask) you can find the simple rule: **"As you see new answers to your question, vote up the helpful ones by clicking the upward pointing arrow to the left of the answer."** The "accepted" and not voted questions will be in many ways interpret as "closed" and will be placed at the last place by the searching engine, because the answer is interpreted as **not helpful**. I think you should know this. — Oleg, May 03 '11 at 09:43
Thanks! This helped me a lot in writing my own custom paging implementation. — Jonathan, Sep 14 '11 at 14:07
@jonathanconway: You are welcome! I wrote that I don't use such pager myself, so I understand, that my implementation is not perfect and need be modified. I posted this as *an example* of the possible implementation and wanted just show in which way one can implement this. So I'am glad that I could help you. — Oleg, Sep 14 '11 at 14:11

score 1 · Answer 2 · answered Jul 10 '12 at 16:37

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 }]);
    });
}

score 1 · Answer 3 · answered Apr 29 '11 at 16:00

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

Both of these solutions work although in different ways. I don't believe there is an onPage event (onPaging maybe), but it works without the call. — HapiDjus, May 09 '11 at 21:41

Add numeric pager to jqGrid

3 Answers3

Linked