페이지네이션을 사용하여 페이지 이동.

//페이지네이션 생성 및 이동 처리
function paging(totalData, dataPerPage, pageCount, currentPage) {
  console.log('currentPage : ' + currentPage)
 
  var totalPage = Math.ceil(totalData / dataPerPage) // 총 페이지 수
  var pageGroup = Math.ceil(currentPage / pageCount) // 페이지 그룹
 
  console.log('pageGroup : ' + pageGroup)
 
  var last = pageGroup * pageCount // 화면에 보여질 마지막 페이지 번호
  if (last > totalPage) last = totalPage
  var first = last - (pageCount - 1) < 1 ? 1 : last - (pageCount - 1) // 화면에 보여질 첫번째 페이지 번호보여질 첫번째 페이지 번호
  var next = last + 1
  var prev = first - 1
 
  console.log('last : ' + last)
  console.log('first : ' + first)
  console.log('next : ' + next)
  console.log('prev : ' + prev)
 
  var $pingingView = $('#paging')
 
  var html = ''
 
  if (prev == 0) {
    html += "<a href=# id='first' class='disabled'>|<</a> "
    html += "<a href=# id='prev' class='disabled'><</a> "
  } else {
    html += "<a href=# id='first'>|<</a> "
    html += "<a href=# id='prev'><</a> "
  }
 
  for (var i = first; i <= last; i++) {
    html += "<a href='#' style='width: 50px' id=" + i + '>' + i + '</a> '
  }
 
  if (last < totalPage) {
    html += "<a href=# id='next'>></a>"
    html += "<a href=# id='last'>>|</a>"
  } else {
    html += "<a href=# id='next' class='disabled'>></a>"
    html += "<a href=# id='last' class='disabled'>>|</a>"
  }
 
  $('#paging').html(html) // 페이지 목록 생성
 
  $('#paging a').css({ color: 'black', 'padding-left': '10px' })
 
  $('#paging a#' + currentPage).css({
    'text-decoration': 'none',
    color: 'red',
    'font-weight': 'bold',
  }) // 현재 페이지 표시
 
  $('#paging a').click(function () {
    var $item = $(this)
    var $id = $item.attr('id')
    var selectedPage = $item.text()
 
    if ($id == 'first') selectedPage = 1
    if ($id == 'next') selectedPage = next
    if ($id == 'prev') selectedPage = prev < 1 ? 1 : prev
    if ($id == 'last') selectedPage = totalPage
 
    gridView.setPage(selectedPage - 1)
    paging(totalData, dataPerPage, pageCount, selectedPage)
  })
}
 
//SelectBox를 이용한 페이지 이동
function setPageSelbox(totalData, dataPerPage) {
  var totalPage = Math.ceil(totalData / dataPerPage) // 총 페이지 수
 
  //SelectBox에 페이지를 채움
  for (var i = 1; i <= totalPage; i++) {
    var optStr = '<option value=' + i + '>' + i + '</option>'
    console.log(optStr)
    $('#selBox').append(optStr)
  }
 
  //값 변경시 페이지 이동
  $('#selBox').change(function () {
    var totalData = dataProvider.getRowCount() // 총 데이터 수
    var dataPerPage = 8 // 한 페이지에 나타낼 데이터 수
    var pageCount = 3 // 한 화면에 나타낼 페이지 수
    var selectedPage = $(this).val()
 
    gridView.setPage(selectedPage - 1)
    paging(totalData, dataPerPage, pageCount, selectedPage)
  })
}