jqGrid Pager - updatepager Method

jqGrid v4.6

by 1004lucifer

HTML

<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-kr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<div style="height:250px;">
  <table id="list"><tr><td></td></tr></table> 
  <div id="pager"></div>
  <br />
  <button id="updateBtn" style="margin-right:10px;">Update Page Number</button>
  page:<input id="page" type="text" value="1" style="width:30px;margin-right:10px;" />
  lastpage:<input id="lastpage" type="text" value="2" style="width:30px;" />
</div>

JavaScript

var dataArray = [
  { "name": "Lorene Battle", "phone": "(936) 574-3976" },
  { "name": "Wendi Downs", "phone": "(815) 510-3017" },
  { "name": "Lorene Battle", "phone": "(936) 574-3976" },
  { "name": "Wendi Downs", "phone": "(815) 510-3017" },
  { "name": "Lorene Battle", "phone": "(936) 574-3976" },
  { "name": "Wendi Downs", "phone": "(815) 510-3017" },
  { "name": "Lorene Battle", "phone": "(936) 574-3976" },
  { "name": "Wendi Downs", "phone": "(815) 510-3017" },
  { "name": "Lorene Battle", "phone": "(936) 574-3976" },
  { "name": "Wendi Downs", "phone": "(815) 510-3017" },
  { "name": "Lorene Battle", "phone": "(936) 574-3976" },
  { "name": "Wendi Downs", "phone": "(815) 510-3017" }
];

$('#list').jqGrid({
  datatype: 'local',
  styleUI: 'Foundation',
  data: dataArray,
  colModel: [
    {name: 'name', label : 'Name'},
    {name: 'phone', label : 'Phone Number'}
  ],
  caption : '페이지번호 업데이트 예제',
  height: 'auto',
  autowidth: true,
  rowNum: 3,
  rowList: [3,4,5],
  pager: '#pager'
});

$('#updateBtn').click(function(){
  var grid = $('#list')
  grid.jqGrid('setGridParam', {
    page: $('#page').val(),
    lastpage: $('#lastpage').val()
  })
  grid[0].updatepager()
})