如何将JqGrid的{2}参数值存储为变量并复用至HTML元素

要把jqGrid的总行数赋值给HTML按钮，你可以用jqGrid内置的API获取总行数，再更新按钮的value属性，具体代码修改如下：

<input type="button" name="htmlbutton" id="htmlbutton" value="">

<table id="jqGrid" ></table>
<div id="jqGridPager"></div>

<script type="text/javascript">
    var MaingridQueryResults_1 = {{available_lessons|safe}};
    $("#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,
        // 表格加载完成后触发事件，同步更新按钮值
        gridComplete: function() {
            // 获取和recordtext中{2}一致的总行数
            var totalRecords = $(this).jqGrid("getGridParam", "records");
            // 赋值给按钮，可按需拼接文本
            $("#htmlbutton").val(totalRecords + " Results");
            // 若只需纯数字，用$("#htmlbutton").val(totalRecords);即可
        }
    });

    // 静态数据场景下，也可在初始化后直接获取赋值
    // var totalRecords = $("#jqGrid").jqGrid("getGridParam", "records");
    // $("#htmlbutton").val(totalRecords + " Results");
</script>

关键说明 #

• getGridParam("records")能准确获取jqGrid统计的总行数，包括过滤、搜索后的结果数，比直接取数据源数组长度更可靠。
• gridComplete事件会在表格每次渲染完成后触发，比如数据更新、搜索过滤后，能保证按钮值始终和表格实际显示的总行数同步。

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