I am facing problem with pagination in jqgrid with array data having 13 records, but the records are not displaying in pages.
Can you please help me to implement pagination instead of scrolling.
<script type="text/ecmascript">
$(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',
viewrecords: true,
sortorder: "desc",
caption: "Manipulating Array Data"
});
jQuery("#Table1").jqGrid('navGrid', '#Div1', { edit: false, add: false, del: false });
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>
_______________________________________________________________________________________
<body>
<form id="form1" runat="server">
<asp:Table ID="Table1" runat="server"></asp:Table>
<div id="Div1"></div>
</form>
</body>
Submit an article or tip