I am facing problem with pagination in jqgrid with array data having 13 records, but the records are not displaying in pages.
How to implement pagination instead of scrolling?
$(document).ready(function () {
jQuery("#Table1").jqGrid({
datatype: "local",
height: 250,
colNames: ['Inv No', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 60, sorttype: "int" },
{ name: 'name', index: 'name', width: 100 },
{ name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
{ name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
{ name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
{ name: 'note', index: 'note', width: 150,}
],
rowNum:10,
rowList:[10,20,30],
pager: '#Div1',
multiselect: true,
caption: "Manipulating Array Data"
});
var mydata = [
{ id: "1", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "2", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "3", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "4", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "5", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "6", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "7", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "8", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "9", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "10", name: "test1", note: "note", amount: "500.00", tax: "10.00", total: "310.00" },
{ id: "11", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "12", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "13", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
];
for (var i = 0; i <= mydata.length; i++)
jQuery("#Table1").jqGrid('addRowData', i + 1, mydata[i]);
});
</script>
<form id="form1" runat="server">
<asp:Table ID="Table1" runat="server"></asp:Table>
<div id="Div1"></div>
</form>
You fill jqGrid in a wrong way. The method addRowData is very old. It's low-level method which allows to add row manually. Starting with version 3.7 (the current version is 4.6.0) jqGrid supports local data, local paging, sorting and filtering. To have advantage of the local data you should use data parameter of jqGrid. It allows you to save locally in jqGrid all data (more as one can display on one page), but fill in the table only the first page. The code will be about the following
$(document).ready(function () {
var mydata = [
{ id: "1", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "2", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "3", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "4", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "5", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "6", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "7", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "8", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "9", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "10", name: "test1", note: "note", amount: "500.00", tax: "10.00", total: "310.00" },
{ id: "11", name: "test1", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "12", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "13", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
];
$("#Table1").jqGrid({
datatype: "local",
data: mydata,
height: "auto",
colNames: ['Inv No', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name: 'id', width: 60, sorttype: "int", key: true },
{ name: 'name', width: 100 },
{ name: 'amount', width: 80, align: "right", sorttype: "float" },
{ name: 'tax', width: 80, align: "right", sorttype: "float" },
{ name: 'total', width: 80, align: "right", sorttype: "float" },
{ name: 'note', width: 150 }
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#Div1',
multiselect: true,
caption: "Manipulating Array Data",
gridview: true,
autoencode: true
});
});
I added in the above code data: mydata, gridview: true, autoencode: true parameters, replaced height: 250 to height: "auto", removed index property from all items of colModel and added key: true to the column which contains unique values which I want to use as rowid.
I understand why you made the code. The official demo page contains very old code. For example the demo from "Loading Data"\"Array Data" contains the same problems like in your code. By the way the code contains even small bug: it uses i <= mydata.length in the loop instead of i < mydata.length. I asked Tony (the developer of jqGrid) to update the demo page, but he didn't found the time for it. :-(
UPDATED: The demo uses the above code and it works as expected.