jqGrid Pager - clearGridData 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>
  <button id="init">초기화</button>
  <button id="clearGridData">clearGridData - 기본값:false</button>
  <button id="clearGridDataTrue">clearGridData(true)</button>
</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" }
];

function init () {
  $("#list").jqGrid('GridUnload')
  $("#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,
    rowNum: 3,
    rowList: [3, 4, 5],
    footerrow: true,
    userDataOnFooter: true,
    pager: '#pager',
    onPaging: function (pgButton) {
      $('#eventLog').append(pgButton + '<br/>')
    }
  });
  $('#list').jqGrid('footerData', 'set', {
    name: 'Footer 이름 영역',
    phone: 'Footer Phone 영역'
  })
}
init()

$('#init').click(function () {
  init()
})

$('#clearGridData').click(function () {
  $('#list').jqGrid('clearGridData')
})

$('#clearGridDataTrue').click(function () {
  $('#list').jqGrid('clearGridData', true)
})