how to change values in jqgrid pager

Question

Senior Developer. I am a new developer and I am not sure about jqgrid.

Thank you very much for your help. I am concerned about performance degradation when querying large amounts of data in jqgrid. So we only retrieve the data from the DB as much as the rowNum select Box value, and the total count of the data together with the number.

I want to change the values ​​of the pager according to the response data after querying the condition. (pager value of jqgrid - total, records...).

The structure of the server response object is

data: {
page: {
totalRowCount,
currentPage,
displayRowCount,
totalPage
},
fileInfoDtoList
}

That's it.

The totalRowCount and fileInfoDtoList sizes are not the same.

fileInfoDtoList contains only the data shown in the table of the current page.

totalRowCount is the total number of data that will be generated in the actual condition query.

I tried to change lastpage, records, total with setGridParam and also changed the internal value by assigning jsonReader to variable using getGridParam, but the actual pagerUI value did not change.

fileDataGrid.jqGrid({
                url: setUrl(),
                mtype: "GET",
                datatype: "json",
                colModel: [
                    {
                        label: 'date', name: 'baseDate',
                        formatter: function (cellValue, options, rowdata) {
                            let fixedValue = cellValue.substr(0, 4) + "-" +
                                cellValue.substr(4, 2) + "-" +
                                cellValue.substr(6, 2);
                            return $.fn.fmatter.call(this, "date", fixedValue, options, rowdata);
                        },
                        formatoptions: {
                            newformat: "Y-m-d"
                        }
                        , align: 'center'
                    },
                    {label: 'aa', name: 'diseaseName', align: 'right'},
                    {label: 'bb', name: 'fileName', align: 'right'},
                    {label: 'cc', name: 'fileSize', align: 'right'},
                    {label: 'dd', name: 'fileStateName', align: 'center'},
                ],
                jsonReader: {
                    records: 'page.totalRowCount',
                    total:'page.totalPage',
                    root: 'fileInfoDtoList',
                    page: 'page.currentPage',
                    repeatitems: false
                },
                rowNum: 10, 
                viewrecords: true,
                rownumbers: true,
                emptyrecords: 'No Datas',
                loadonce: false,
                sortable: 'true',
                pager: '#pager',
                rowList: [10, 20, 30],



//paging event area
                onPaging: function (pgButton) {
                    console.log(pgButton);

                    setTimeout(function () {
                        $.ajax({
                            url: setUrl(),
                            method: 'get',
                            success: function (data) {
                                console.log(data);
                                let rowNum = $("#fileDataCollectJqGrid").getGridParam('rowNum');
                                let currentPage = $("#fileDataCollectJqGrid").getGridParam('page');
                                let lastPage = $("#fileDataCollectJqGrid").getGridParam('lastpage');
                                let totalrows = $("#fileDataCollectJqGrid").getGridParam('totalrows');

                                console.log(" rowNum : " + rowNum + " currentPage : " + currentPage + " lastPage : " + lastPage + " totalrows : " + totalrows );
                                fileDataGrid.jqGrid('clearGridData');
                                let jsonReader = fileDataGrid.jqGrid('getGridParam', 'jsonReader');
                                console.log(jsonReader);
                                jsonReader.total = 999;
                                console.log(fileDataGrid.jqGrid('getGridParam', 'jsonReader'));
                                fileDataGrid.jqGrid("setGridParam", {
                                    datatype: "local",
                                    data: data.fileInfoDtoList,
                                    lastpage: data.page.totalPage,
                                    records: data.page.totalRowCount,
                                });
                                fileDataGrid.trigger('reloadGrid');
                            }
                        })
                    }, 0);
                }
            });

button event area

 $("#searchButton").click(function () {
                $.ajax({
                    url: setUrl(),
                    method: "get",
                    success: function (data) {
                        console.log(setUrl());
                        console.log(data);
                        let $fileDataCollectJqGrid = $('#fileDataCollectJqGrid');
                        $fileDataCollectJqGrid.jqGrid('clearGridData');
                        $fileDataCollectJqGrid.jqGrid("setGridParam", {
                            datatype: "local",
                            data: data.fileInfoDtoList,
                            totalRows: data.page.totalPage,
                        });
                        $fileDataCollectJqGrid.trigger('reloadGrid');
                    }
                });
            });

Initially, when I set jqgrid, it knows that the value of pager is set according to the setting value of jsonReader. I tried to set the value of the pager after the condition query, but the value was not changed in the pagerUI part.

And I tried to change the total (total Page Count) and records (total Row Count) of the pager with setGridParam, but I changed the lastpage, totalrows, and so on. However, the total Row Count has changed by the size of the list.

fileDataGrid.jqGrid("setGridParam", {
                                    datatype: "local",
                                    data: data.fileInfoDtoList, <<--changed total (total Page Count) value of pager as this size of list. 
                                    lastpage: data.page.totalPage,
                                    records: data.page.totalRowCount,
                                });

Answer 1

i solved problem myself! just settled post Data as setGridParam when i call data request method. i already set pager data in jsonReader. so i could solve my problem.

 $('#fileDataCollectJqGrid').jqGrid('setGridParam', {
                postData: {
                    collectId: "${collectId}",
                    baseDate: $('#dateInput').val(),
                    diseaseCode: $('#diseaseSelect').val(),
                    fileName: $('#fileNameInput').val(),
                    stateCode: $('#collectionStatus').val()
                },
            }).trigger('reloadGrid');