javascript - Error in Pageing in gqgrid with local array data -

i facing problem pagination in jqgrid array data having 13 records, records not displaying in pages.

can please me 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" }         ];         (var = 0; <= mydata.length; i++)             jquery("#table1").jqgrid('addrowdata', + 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 wrong way. method addrowdata old. it's low-level method allows add row manually. starting version 3.7 (the current version 4.6.0) jqgrid supports local data, local paging, sorting , filtering. have advantage of local data should use data parameter of jqgrid. allows save locally in jqgrid data (more 1 can display on 1 page), fill in table first page. code 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 above code data: mydata, gridview: true, autoencode: true parameters, replaced height: 250 height: "auto", removed index property items of colmodel , added key: true column contains unique values want use rowid.

i understand why made code. the official demo page contains old code. example demo "loading data"\"array data" contains same problems in code. way code contains small bug: uses i <= mydata.length in loop instead of i < mydata.length. asked tony (the developer of jqgrid) update demo page, didn't found time it. :-(

updated: the demo uses above code , works expected.