jqGrid - onPaging Event

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:400px">
  <table id="list"><tr><td></td></tr></table> 
  <div id="pager"></div>
  <h4>onPaging Event Log (페이지 이동을 해보세요.)</h4>
  <span id="eventLog"></span>
</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 : 'Users Grid',
  height: 'auto',
  autowidth: true,
  sortorder: "desc",
  rowNum: 3,
  rowList: [3,4,5],
  pager: '#pager',
  onPaging: function(pgButton) {
    var page = $('.ui-pg-input').val()
    var lastpage = $('#list').getGridParam('lastpage')
    
    // page의 값범위 체크 (1 ~ lastpage)
    var valid = 0 < page && page <= lastpage
    if (valid) {
      // datatype:'local' 인경우 다음과 같은 로직 수행
      page =
        pgButton === 'next_pager' ? page + 1
      : pgButton === 'prev_pager' ? page - 1
      : pgButton === 'first_pager' ? 1
      : pgButton === 'last_pager' ? lastpage
      : pgButton === 'user' ? page : 1
      rowCount = $('.ui-pg-selbox option:selected').val()
      // 서버 호출 로직 - serverCallMethod(page, rowCount)
      
      $('#eventLog').append(pgButton + '<br/>') // 문자열 로그화
    } else {
      alert('올바른 값을 입력해 주세요.')
      $('.ui-pg-input').val($('#list').getGridParam('page'))
      return 'stop'
    }
  }
});