Move pages using pagination.

//Pagination creation and movement processing
function paging(totalData, dataPerPage, pageCount, currentPage) {
   console.log('currentPage : ' + currentPage)
 
   var totalPage = Math.ceil(totalData / dataPerPage) // Total number of pages
   var pageGroup = Math.ceil(currentPage / pageCount) // Page Group
 
   console.log('pageGroup : ' + pageGroup)
 
   var last = pageGroup * pageCount // Last page number to be displayed on screen
   if (last > totalPage) last = totalPage
   var first = last - (pageCount - 1) < 1 ? 1 : last - (pageCount - 1) // First page number to be displayed on the screenFirst page number to be displayed
   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) // Create page list
 
   $('#paging a').css({ color: 'black', 'padding-left': '10px' })
 
   $('#paging a#' + currentPage).css({
     'text-decoration': 'none',
     color: 'red',
     'font-weight': 'bold',
   }) // Show current page
 
   $('#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)
   })
}
 
//Move page using SelectBox
function setPageSelbox(totalData, dataPerPage) {
   var totalPage = Math.ceil(totalData / dataPerPage) // Total number of pages
 
   //Fill the page into the SelectBox
   for (var i = 1; i <= totalPage; i++) {
     var optStr = '<option value=' + i + '>' + i + '</option>'
     console.log(optStr)
     $('#selBox').append(optStr)
   }
 
   //Move page when value changes
   $('#selBox').change(function () {
     var totalData = dataProvider.getRowCount() // total number of data
     var dataPerPage = 8 // Number of data to display on one page
     var pageCount = 3 // Number of pages to display on one screen
     var selectedPage = $(this).val()
 
     gridView.setPage(selectedPage - 1)
     paging(totalData, dataPerPage, pageCount, selectedPage)
   })
}