4
« on: December 09, 2015, 11:06:15 am »
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);
}
});
});