如何在 jqGrid 中提取并复用分页统计参数 {2} 的值-js教程-PHP中文网

本文介绍如何从 jqGrid 的 recordtext 配置中动态提取实际记录总数（即 {2} 占位符对应的数值），并将其赋值给任意 HTML 元素（如按钮、标签等），实现跨组件的数据复用。

本文介绍如何从 jqgrid 的 `recordtext` 配置中动态提取实际记录总数（即 `{2}` 占位符对应的数值），并将其赋值给任意 html 元素（如按钮、标签等），实现跨组件的数据复用。

jqGrid 在渲染完成后会自动将 recordtext 中的 {2} 替换为当前数据总条数（例如 "12 Results"），但该替换仅发生在分页栏内部，原始配置字符串（如 "{2} Results"）本身并不包含实时数值。若需在外部 HTML 元素（如）中同步显示该数量，不能直接读取 recordtext 字符串，而应借助 loadComplete 回调 + getGridParam('records') 获取真实计数。

推荐做法如下：在 loadComplete 中获取 records 参数（即数据源总长度），再格式化写入目标元素：

$("#jqGrid").jqGrid({
    datatype: 'local',
    data: MaingridQueryResults_1,
    colModel: [
        { name: 'id', label: 'id', align: 'left', hidden: true, width: 30 },
        { name: 'phone', label: 'Société', align: 'left', width: 90 },
        { name: 'last_name', label: 'Nom', align: 'left', width: 80 },
        { name: 'first_name', label: 'Prénom', align: 'left', width: 60 }
    ],
    width: window.innerWidth - 50,
    height: 300,
    pager: "#jqGridPager",
    pginput: false,
    pgbuttons: false,
    pgtext: null,
    viewrecords: true,
    recordtext: "{2} Results", // 仅用于分页栏显示
    toppager: true,

    // ✅ 关键：在数据加载完成时同步更新外部按钮
    loadComplete: function () {
        const totalRecords = $(this).jqGrid('getGridParam', 'records');
        $('#htmlbutton').val(`${totalRecords} Results`);
    }
});

⚠️ 注意事项：

loadComplete 是最可靠的时机——此时 records 参数已准确计算完毕；

避免使用正则解析 recordtext 字符串（如原答案中的 /\{(.*?)\}/），因为 {2} 是 jqGrid 内部模板占位符，其值不会出现在 recordtext 原始字符串中，该正则在初始化时必然匹配失败；

若需支持国际化或自定义文案，可将 ${totalRecords} Results 抽离为函数，例如 formatRecordText(totalRecords)；

确保 #htmlbutton 元素在 grid 初始化前已存在于 DOM 中，否则需延迟执行或使用事件委托。

通过这种方式，你不仅能精准复用 jqGrid 的真实数据总量，还能保持逻辑清晰、维护性强，适用于任何需要与 grid 状态联动的 UI 场景。