Jquery 将数字寻呼机添加到jqGrid

有人知道如何设置jqGrid来使用数字寻呼机吗

而不是第1页，共20页，我想让页面像1,2,3,4>>>一样，当我点击4时，它会像>>

我见过其他网格是如何做到这一点的，但我似乎找不到jqGrid实现这一点的内置方法。 我可能有办法实现它，但如果已经有了一些东西，我不想重新发明轮子。这需要我在从网格数据中获取用户数据后添加自定义按钮，以确定可用页面

---

Telerik的电网做到了这一点(http://demos.telerik.com/aspnet-mvc/grid).

据我所知，jquery中没有解决方案，您必须自己完成。下面是寻呼机的工作代码：

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

并将其附加到onPage事件

//onPage
jqgridCreatePager('yourGridNavigator','yourGrid',3)

为了防止闪烁，只需添加到css中

#yourGridNavigator_center{
 display:none;
}

在gridComplete上，只需添加

$('#yourGridNavigator_center').show();

关于功能参数：

• 首先是网格导航器id
• 第二个是你的网格id
• 该函数的第三个参数是当前页面前后应显示的页面数

---

哦！在我编写代码的过程中，firegnom发布了另一个实现。然而，最好是两个工作版本，因为没有人
我制作了一个小演示，演示了如何实现寻呼机中链接的行为。我制作了这样的代码，它可以在表单中显示寻呼机
（如果使用jqGrid的

pginput:false

参数）或
在这两种情况下，当前页面都不会显示在列表中。如何看到我为链接插入了带下划线的样式。如果你不喜欢它，你应该删除它

td.myPager a { text-decoration:underline !important }

从演示中。工作现场演示，你可以看到和
相应的JavaScript代码在

loadComplete

事件处理程序中是完整的：

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

---

还有一个可能的解决方案
它用链接列表替换分页文本框

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

loadComplete:function（）{
var grid=此；
var container=jQuery（“#prev#u jqGridTablePager”）.next（）.next（）；
jQuery（container.html（“”）；
var totalPages=grid.p.lastpage；
对于（var i=1；i当您发现时，请通知我们，以便我们也可以进行更新。做得好。进行了一些调整以使其正常工作，但效果很好。这将是4的一个很酷的内置功能。1@HapiDjus：我发现解决方案还不完美。我不知道显示当前页面和pa总数的最佳方式ges的新外观。关于在jqGrid的新vesrion中包含该功能。我不是jqGrid的开发人员，因此我必须影响在jqGrid的新版本中包含新功能。如果我们找到非常好的方式来显示当前页面和总页面数，我可以在trirand论坛中用我的代码发布功能请求，然后该功能可能会包含在下一个jqGrid版本中，但您现在可以在
loadComplete
中使用该代码。@HapiDjus:还有一条一般性的评论。我发现您在任何时候都不使用“投票”。从15点声誉开始，您就有权使用该功能。您可以找到简单的规则：“当您看到问题的新答案时，请单击答案左侧的向上箭头，将有帮助的问题向上投票。”“已接受”和未投票的问题在许多方面都会被解释为“已结束”"搜索引擎会将其放在最后一位，因为答案被解释为没有帮助。我想你应该知道这一点。@Oleg:很好，也许有一天会有用。谢谢！这对我编写自己的自定义分页实现有很大帮助。这两种解决方案都可以工作，尽管方式不同。我不相信有一个onPage事件（可能是onPaging），但它在没有调用的情况下工作。
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);
    }
}

var grid = $("#list"), MAX_PAGERS = 2;

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