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

리얼그리드의 기능과 자바스크립트를 이용하여 페이지 네비게이터를 구현한 데모 입니다. 그리드 하단에 페이지 네비게이터가 위치할 div를 생성하여 처리 합니다.

//페이지 네비게이션 생성 및 이동 처리
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' className='disabled'>|<</a> "
    html += "<a href=# id='prev' className='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' className='disabled'>></a>"
    html += "<a href=# id='last' className='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)
  })
}