on pqpagerchange event currPage and rPP is undefined?

[ismail.siddiqui]

In my project, I have requirement for pagination for large data. on click of next page button i want to capture next page number and also the rows Per Page value so that I fetch data from Database using this values.

Please help me!

$("#grid_array").on("pqpagerchange", function (event, ui) {
                debugger;
                var sRPP = $("#grid_array").pqGrid("option", "rPP");
                var sCurrentPage = $("#grid_array").pqGrid("option", "curPage");
                $.ajax({
                    type: "GET",
                    url: '@Url.Action("SearchTransForPage","SEARCH_Permission")',
                    data: { sPageNum: sCurrentPage, sRecordsPerPage: sRPP },
                    success: function (data) {
                        debugger;
                        var arrData = [];
                        var model = JSON.parse(data);

                        for (var i = 0; i < model.length; i++) {
                            var arrtmp = [
                                model.WALLET_TXN_ID,
                                model.TXN_DATETIME,
                                model.TXN_TYPE,
                                model.TXN_STATUS_CODE,
                                model.Amount
                             ];

                            arrData.push(arrtmp);


                        }

                        var obj = { width: 1150, height: 270,
                            title: "Merchant Transactions",
                            numberCell: { resizable: true, title: "#" },
                            editable: false,
                            flexWidth: false,
                            showBottom: false,
                            resizable: false,
                            collapsible: false,
                            columnBorders: true,
                            selectionModel: { type: null },
                            pageModel: { type: 'local', rPP: 10, rPPOptions: [1, 10, 20, 30, 40, 50, 100, 500, 1000] },
                            rowBorders: true,
                            toolbar: {
                                cls: 'pq-toolbar-export',
                                items: [{
                                    type: 'button',
                                    label: "Export to Excel",
                                    icon: 'ui-icon-document',
                                    listeners: [{
                                        "click": function (evt) {
                                            $("#grid_array").pqGrid("exportExcel",
                                    { url: '@(Url.Action("excel", "SEARCH_Permission"))', sheetName: "pqGrid sheet" });
                                        }
                                    }]
                                }]
                            }
                        };
                        obj.colModel = [
                    { title: "Txn ID", render: function (ui) {
                        return '<a href= "\\SEARCH_Permission\\SearchDetails?id=' + ui.cellData + '" style="color:blue;text-decoration: underline;" >' + ui.cellData + '</a>';
                    }, width: 100
                    },
                    { title: "Txn DateTime", width: 200 },
                    { title: "Txn Type", width: 200 },
                    { title: "Txn Status", width: 100 },
                    {title: "Amount", width: 70 }
                        ];
                        obj.dataModel = { data: arrData };
                        $("#grid_array").pqPager({ rPP: sRPP });

                        $("#grid_array").pqPager({ currentPage: sCurrentPage });
                        var $grid = $("#grid_array").pqGrid(obj);

                    }
                });

            });

[paramvir]

Recreating grid on every page change event is not the right approach to implement remote paging.

Follow this example for remote paging: http://paramquery.com/demos/paging

Grid automatically sends the required parameters for paging pq_curpage & pq_rpp to the remote script.

[ismail.siddiqui]

Thanks for your quick response.

But there is a problem. initially i don't have any data for showing .

User have to input some search data and on the basis of that data, result will be show on screen in the pqgrid.

I have one submit button that perform searching on the basis of search data. After coming data from the server now i want to perform pagination.

[paramvir]

Then keep dataModel.location = "local" initially and set it to "remote" when user enters the search parameter and call refreshDataAndView() to initiate remote request.

And there are various ways to include search param in your remote request

1. implement dataModel.getUrl

or

2. use dataModel.postData option.

[ismail.siddiqui]

Thank for your reposne.

But I am new for this.

Can you please give me example for this?

[ismail.siddiqui]

I am waiting for your reply. Please help me.