jqGrid单页面多网格场景下部分网格分页功能异常求助

Hey there! Sorry to hear you're running into pagination issues with multiple jqGrids on a single page—let's break this down and figure out what's going wrong.

Common Causes & Fixes for Multi-Grid Pagination Issues #

1. Duplicate DOM IDs (Most Likely Culprit)

jqGrid relies entirely on unique DOM element IDs for both the grid itself and its pager. If you're reusing pager IDs (like the default grid_pager across multiple grids), it'll cause conflicts that break pagination for all but the first grid.

Fix: Assign unique IDs to every grid and its corresponding pager, then explicitly reference them in your initialization code:

<!-- HTML结构 -->
<table id="contactGrid"></table>
<div id="contactGridPager"></div>

<table id="orderGrid"></table>
<div id="orderGridPager"></div>

// 初始化contactGrid
$("#contactGrid").jqGrid({
    url: "/your-contacts-endpoint",
    datatype: "json",
    pager: "#contactGridPager",
    rowNum: 10,
    rowList: [10, 20, 50],
    // 其他配置...
});

// 初始化orderGrid（注意唯一的pager ID）
$("#orderGrid").jqGrid({
    url: "/your-orders-endpoint",
    datatype: "json",
    pager: "#orderGridPager",
    rowNum: 10,
    rowList: [10, 20, 50],
    // 其他配置...
});

2. Shared Global Configurations

If you've set global jqGrid defaults that aren't overridden for individual grids, it can lead to unexpected behavior (especially for server-side pagination settings).

Fix: Explicitly declare pagination-related parameters for each grid to avoid relying on global defaults:

$("#orderGrid").jqGrid({
    // ...其他核心配置
    loadonce: false, // 服务器端分页必须设为false
    page: 1, // 强制初始页码为1
    prmNames: {
        page: "orderPage", // 可选：给分页参数加前缀，避免和其他网格冲突
        rows: "orderRows"
    },
    // ...
});

3. AJAX Request Conflicts or Caching

Multiple grids firing AJAX requests at page load can sometimes trigger browser caching, or your server might not distinguish between requests from different grids, returning incorrect data.

Fix: Disable caching for grid requests and add unique identifiers to avoid conflicts:

$("#orderGrid").jqGrid({
    // ...
    ajaxGridOptions: {
        cache: false,
        beforeSend: function(xhr, settings) {
            // 追加时间戳确保每个请求唯一
            settings.url += (settings.url.includes('?') ? '&' : '?') + '_t=' + Date.now();
        }
    },
    // ...
});

4. DOM Load Order Issues

If you're initializing grids before their corresponding DOM elements are fully rendered (especially for grids lower on the page), the grid might not set up pagination controls correctly.

Fix: Wrap all grid initializations in a DOM-ready handler to ensure elements exist before setup:

$(document).ready(function() {
    // 按顺序初始化所有网格
    initContactGrid();
    initOrderGrid();
});

function initContactGrid() {
    $("#contactGrid").jqGrid({ /* ...配置... */ });
}

function initOrderGrid() {
    $("#orderGrid").jqGrid({ /* ...配置... */ });
}

5. Server-Side Parameter Handling

Double-check that your server is correctly parsing pagination parameters for each grid. If you're using the same parameter names (like page or rows) across multiple grid endpoints, ensure the server is routing requests properly and returning data tailored to each grid's context.

Debug Tip: Use your browser's dev tools (Network tab) to compare the AJAX requests from contactGrid and orderGrid—look for differences in parameters sent or data returned.

内容的提问来源于stack exchange，提问作者user2688626