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

Cipolin

When you found that, Please inform us, so that we can also have the update. – Lulualaba

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;

Intercontinental

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 – Cipolin

@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. – Intercontinental

@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 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. – Intercontinental

Thanks! This helped me a lot in writing my own custom paging implementation. – Borehole

@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. – Intercontinental

I should GitHub my version of it, if I ever get time :) – Borehole

Answer 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:

• 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

Windmill

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. – Cipolin

Answer 3

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

Postpaid