Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
589 views
in Technique[技术] by (71.8m points)

jquery - Add numeric pager to jqGrid

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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;

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...