Pagination problem in jqgrid with array data.

Pagination problem in jqgrid with array data.

Hi All,

I am facing problem with pagination in jqgrid with array data having 18 records, but the records are not displaying in pages even I specified pagination:true,pager:jQuery('#pager1'). Can you please help me to implement pagination instead of scrolling.

Please find the code below : 

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <title>jqGrid Example</title>

  8. <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
  9. <script src="js/jquery-ui-1.8.custom.min.js" type="text/javascript" ></script>
  10. <script src="js/grid.locale-en.js" type="text/javascript"></script>
  11. <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
  12. <script src="js/grid.custom.js" type="text/javascript"></script>
  13. <link href="css/jquery-ui-1.8.custom.css" rel="Stylesheet" type="text/css" />
  14. <link type="text/css" href="themes/default/style.css" rel="Stylesheet"/>      
  15. <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
  16. <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" />    
  17. <script src="js/grid.custom.js" type="text/javascript"></script>   
  18.    
  19.    
  20. </head>      

  22. <body>


  25. <div align="center">
  26. <div id="search"></div>
  27. <table id="list4" class="scroll" cellpadding="0" cellspacing="0"></table>
  28. <div id="pager1" class="scroll" style="text-align:center;"></div>   
  29. <input type="button" value="Delete Row" onclick="deleteRow();" /><br />
  30. <input type="button" value="Get Row IDs" onclick="getRowIDs();" /><br />
  31. <input type="button" value="Move up" onclick="move('up');" /><br />
  32. <input type="button" value="Move down" onclick="move('down');" /><br />
  33. <input type="button" value="Get Current Row" onclick="getCurrentRow();" />
  34. </div>   
  35. <script type="text/javascript">
  36. jQuery("#list4").jqGrid({
  37. datatype: "clientSide",
  38. height: 200,
  39.    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
  40.    colModel:[
  41.    {name:'id',index:'id', width:60, sorttype:"int"},
  42.    {name:'invdate',index:'invdate', width:90, sorttype:"date"},
  43.    {name:'name',index:'name', width:100},
  44.    {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
  45.    {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},
  46.    {name:'total',index:'total', width:80,align:"right",sorttype:"float"},
  47.    {name:'note',index:'note', width:150, sortable:false}
  48.    ],
  49.    multiselect: true,
  50. pagination:true,
  51.  pager:jQuery('#pager1'), 
  52. rowNum: 10,
  53. rowList: [5, 10, 20, 50],
  54. sortname: 'id',   
  55. sortorder: 'asc',
  56. viewrecords: true,
  57. page: 1,
  58. loadonce: true,  
  59. totalpages: 2,   
  60. totalrecords:18,     
  61. showpage:true,   
  62. imgpath: "/themes/default/images",         
  63. caption: "Manipulating Array Data"
  64. });
  65. var mydata = [
  66. {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
  67. {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
  68. {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
  69. {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
  70. {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
  71. {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
  72. {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
  73. {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
  74. {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
  75. {id:"10",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
  76. {id:"11",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
  77. {id:"12",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
  78. {id:"13",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
  79. {id:"14",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
  80. {id:"15",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
  81. {id:"16",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
  82. {id:"17",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
  83. {id:"18",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
  85. ];
  86. for(var i=0;i<=mydata.length;i++)   
  87. jQuery("#list4").jqGrid('addRowData',i+1,mydata[i]);

  89.  function deleteRow(){
  90.  var tableData = new Array();
  91.  var ids = '';
  92.  $table.delRowData($table.getGridParam('selrow'));
  93.  ids = $table.getDataIDs();
  94.  for(var i = 0; i < ids.length; i++){
  95.  
  96.  tableData[i] = $table.getRowData(ids[i]);
  97.  tableData[i].id = i + 1;
  98.  }
  99.  $table.clearGridData(false);
  100.  for(i = 0; i < tableData.length; i++){
  101.  $table.addRowData(i + 1, tableData[i]);
  102.  }
  103.  }
  104.  function move(direction){
  105.  if($table.getGridParam('selrow')){
  106.  var ids = $table.getDataIDs();
  107.  var temp = 0;
  108.  var currRow = ids[ $table.getGridParam('selrow') - 1 ];
  109.  if(direction === 'up' && currRow > 1){
  110.  var r1 = $table.getRowData(currRow-1);
  111.  var r2 = $table.getRowData(currRow);
  112.  $table.delRowData(currRow-1);
  113.  $table.delRowData(currRow);
  114.  temp = r1.id;
  115.  r1.id = r2.id;
  116.  r2.id = temp;
  117.  $table.addRowData(r2.id, r2);
  118.  $table.addRowData(r1.id, r1);
  119.  }
  120.  if(direction === 'down' && currRow < (ids.length)){
  121.  var r1 = $table.getRowData(currRow);
  122.  var r2 = $table.getRowData(parseInt(currRow)+1);
  123.  $table.delRowData(currRow);
  124.  $table.delRowData(parseInt(currRow)+1);
  125.  temp = r1.id;
  126.  r1.id = r2.id;
  127.  r2.id = temp;
  128.  $table.addRowData(r1.id, r1);
  129.  $table.addRowData(r2.id, r2);
  130.  }
  131.  // Sort the table   
  132.  $table.setGridParam({sortname:'id'}).trigger('reloadGrid');
  133.  }
  134.  }
  135.  function dumpObject(obj){
  136.  var dataString = '';
  137.  for(var i in obj){
  138.  dataString += i + ': ' + obj[i] + '\n';
  139.  }
  140.  alert(dataString);
  141.  }
  142.  function getRowIDs(){
  143.  var ids = $table.getDataIDs();
  144.  var dataString = '';
  145.  for(var i = 0; i < ids.length; i++){
  146.  dataString += 'postion: ' + i + ' ' + ids[i] + '\n';
  147.  }
  148.  alert(dataString);
  149.  }
  150.  function getCurrentRow(){
  151.  var dataString = '';
  152.  var ids = $table.getDataIDs();
  153.  dataString += 'Selected Row: ' + $table.getGridParam('selrow') + '\nRow ID: ' + ids[$table.getGridParam('selrow') - 1];
  154.  alert(dataString);
  155.  }
  156. </script>

  158. </body>
  159. </html>