Jqgrid How to store a parameter as variable to reuse it in html element

Question

I have a Jqgrid :

<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, // WANT TO PUT THIS VALUE INSIDE htmlbutton 
            recordtext: "{2} Results",
            toppager: true,
        });

I modified parameter recordtext: "{2} Results" to display the number of rows of the main grid into the bottom pager thanks to this link : jqGrid recordtext Customization

I would like to be able to copy this {2} parameter value and store it somewhere so I can reuse it in a standard html button or label as value.

How can I do this ?

Answer 1

Here is how I finally achieve what i wanted :

<span id="htmlspan" name="htmlspan"></span>

function getSearchNumbers() {
                var grid = $("#jqGrid");
                var rslt = grid.getGridParam("records");
                document.getElementById('htmlspan').innerHTML = "Results : " + rslt;
            }

Answer 2

To create a custom attribute you have to follow the pattern where your attribute should start with data-*.

In this example I created custom attribute on where value attribute is not present by default.

<div class="grid" data-recordtext="custom text" id="recordtext"></div>
<input type="button" name="htmlbutton" id="htmlbutton" value="">

<script>
    $('#htmlbutton').val($('#recordtext').val());
</script>

Answer 3

You can get that value when the grid is completed:

loadComplete: function () {
  var p = $(this).jqGrid("getGridParam");
  var text = p.recordtext;
  let reg = /\{(.*?)\}/;
  let match = text.match(reg);
  $('#htmlbutton').val(match[1]);
}