jqgrid分页不起作用答案

【问题标题】：jqgrid pagination not workingjqgrid分页不起作用
【发布时间】：2012-04-18 15:57:02
【问题描述】：

我有一个 js 文件并将参数传递给一个 webmethod，它以 json 格式返回输出。只显示第一页。大约有 100 条记录，仅显示 20 条记录。我需要在后续页面中显示其他记录。我尝试添加表格后的 div 标签，如

<div id="pager12" class="scroll" style="text-align:center;></div>

然后在 jqgrid function $('#SearchForComp).jqGrid() 中，我添加了这一行 pager: jQuery('#pager12')。这足以在页面中显示输出还是我应该添加任何内容？它不工作。

谢谢

jquery 是这样的

$("#SearchForComp").jqGrid({
    scroll: true,
    treeGrid: true,
    altRows: true,
    treeGridModel: 'adjacency',
    ExpandColumn: 'DISPLAY_NAME',
    datatype: function (postdata) {
        postdata.deptSeqNo = null;
        postdata.searchString = $("#SearchForComp").val().trim();

        $.ajax({
            type: "POST",
            url: 'Department.aspx/compsearch',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(postdata),
            complete: completeUserSearch
        });
    },
    mtype: "POST",

    colModel: [{ name: 'KEY_FIELD', index: 'KEY_FIELD', width: 1, hidden: true, key: true },
               { label: 'Department/Name', name: 'DISPLAY_NAME', index: 'DISPLAY_NAME', width: 200, resizable: false, sortable: false },
               { label: 'Telephone', name: 'DISPLAY_PHONE', index: 'DISPLAY_PHONE', width: 150, align: 'center', resizable: false, sortable: false },
               { label: 'Email', name: 'DISPLAY_EMAIL', index: 'DISPLAY_EMAIL', width: 225, align: 'center', resizable: false, sortable: false, formatter: 'email'}],
    treeIcons: { plus: 'ui-icon-plus', minus: 'ui-icon-minus', leaf: 'ui-icon-radio-off' },
    height: 'auto',
    caption: "User Search",
    treeReader: {
        level_field: "TREE_LEVEL",
        parent_id_field: "PARENT_ID",
        leaf_field: "IS_LEAF",
        expanded_field: "EXPANDED"
    },
    jsonReader: {
        root: "Data",
        page: "CurrentPage",
        total: "TotalPages",
        records: "TotalRecords",
        repeatitems: false,
        id: "0",
        userdata: "UserData"

    },

    beforeSelectRow: function (id, e) { return false; },
 });

我调用了一个网络方法“compsearch”，它以 json 格式返回数据，然后将其显示给用户。

【问题讨论】：

你应该包含更多完整的 JavaScript 代码来展示你如何使用 jqGrid。

标签： jquery jqgrid

【解决方案1】：

可能您没有定义rowNum 选项，因此将使用默认值20。通常，如果您正确实施服务器端数据分页，这不是问题。如果您不想在服务器端实现数据的分页和过滤，您可以在 jqGrid 中添加loadonce: true 选项。在这种情况下，datatype 选项将更改为'local' 自动，并且无需与您的服务器进行额外通信即可完成分页。不仅如此，loadonce: true 允许您在一行中使用toolbar filter 或Advanced Searching 实现数据过滤。

【讨论】：

嘿，感谢奥列格的回复。我试过 loadonce:true，显示了大约 20 行，然后再次重复，如何避免重复？如果我将 rownum 设为 80，则在 80 条记录后，记录开始重复。
@user1341773：不客气！您应该附加您的问题文本（单击问题下方的“编辑”链接）您的 JavaScript。没有看到它就不能说你的代码中哪里有错误。 Here 您将找到如何格式化答案中插入的代码的详细说明。这真的很简单。您使用的至少部分测试数据也可能会有所帮助（2-3 行数据就足够了）。
我已经粘贴了 jquery 代码。希望这有助于您理解。 :)
@user1341773：你没有写到你使用 TreeGreed 而不是简单的 jqGrid。您可以找到 TreeGrid 的here 限制。限制之一是：不支持分页。如果您考虑实现细节，您将理解如何实现 TreeGrid 的分页并不是那么清楚。在第二页上，您可能希望看到第一个显示项目的父项，它也是父项。
@user1341773: ...所以页面大小小于您需要显示的项目的级别，因为显示父项目，您将没有地方显示项目本身。还有更多这样的问题。无论如何，作为 TreeGrid 的 jqGrid 都不支持分页。