
# Move pages using pagination.

This is a demo that implements pagination using RealGrid functions and JavaScript.
Create and process a div where pagination will be located at the bottom of the grid.

```js
const fields = [
  { fieldName: "KorName", dataType: "text" },
  { fieldName: "Gender", dataType: "text" },
  { fieldName: "Age", dataType: "number" },
  { fieldName: "Phone", dataType: "text" },
  { fieldName: "ProductId", dataType: "text" },
  { fieldName: "KorCountry", dataType: "text" },
  { fieldName: "OrderDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "CardNumber", dataType: "text" },
  { fieldName: "Monetary", dataType: "text" },
  { fieldName: "StartDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "EndDate", dataType: "datetime", datetimeFormat: "yyyy-MM-dd", amText: "AM", pmText: "PM" },
  { fieldName: "ToMonth", dataType: "number" },
  { fieldName: "Month", dataType: "number" },
  { fieldName: "Year", dataType: "number" },
  { fieldName: "InterestRate", dataType: "number" },
  { fieldName: "SaveCost", dataType: "number" },
  { fieldName: "SaveMaturity", dataType: "number" },
  { fieldName: "CurrentSave", dataType: "number" }
];

const columns = [
  { name: "KorName", fieldName: "KorName", width: "60", header: { text: "Name" } },
  { name: "Gender", fieldName: "Gender", width: "40", header: { text: "Gender" } },
  { name: "Age", fieldName: "Age", width: "40", header: { text: "Age" }, styleName: "right-column" },
  { name: "Phone", fieldName: "Phone", width: "100", header: { text: "Phone" } },
  { name: "KorCountry", fieldName: "KorCountry", width: "100", header: { text: "Investment Country" } },
  { name: "OrderDate", fieldName: "OrderDate", width: "100", header: { text: "Order Date" } },
  { name: "CardNumber", fieldName: "CardNumber", width: "140", header: { text: "Card Number" } },
  { name: "Monetary", fieldName: "Monetary", width: "40", header: { text: "Currency" } },
  { name: "StartDate", fieldName: "StartDate", width: "100", header: { text: "First Payment Date" } },
  { name: "EndDate", fieldName: "EndDate", width: "100", header: { text: "End Date" } },
  { name: "ToMonth", fieldName: "ToMonth", width: "50", header: { text: "Payment Count" }, styleName: "right-column" },
  { name: "Month", fieldName: "Month", width: "50", header: { text: "Remaining Count" }, styleName: "right-column" },
  { name: "InterestRate", fieldName: "InterestRate", width: "50", numberFormat: "0.00", header: { text: "Interest Rate" }, styleName: "right-column" },
  { name: "SaveCost", fieldName: "SaveCost", width: "80", numberFormat: "#,##0", header: { text: "Payment Amount" }, styleName: "right-column" },
  { name: "SaveMaturity", fieldName: "SaveMaturity", width: "80", numberFormat: "#,##0", header: { text: "Maturity Amount" }, styleName: "right-column" },
  { name: "CurrentSave", fieldName: "CurrentSave", width: "80", numberFormat: "#,##0", header: { text: "Current Balance" }, styleName: "right-column" }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data300.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
        setPaging();
      });
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

function setPaging() {
  const totalData = dataProvider.getRowCount();
  const dataPerPage = 8;
  const pageCount = 3;

  setPageSelbox(totalData, dataPerPage);
  gridView.setPaging(true, dataPerPage);
  paging(totalData, dataPerPage, pageCount, 1);
}

function paging(totalData, dataPerPage, pageCount, currentPage) {
  const totalPage = Math.ceil(totalData / dataPerPage);
  const pageGroupNum = Math.ceil(currentPage / pageCount);

  let last = pageGroupNum * pageCount;
  if (last > totalPage) last = totalPage;
  const first = last - (pageCount - 1) < 1 ? 1 : last - (pageCount - 1);
  const next = last + 1;
  const prev = first - 1;

  let html = "";

  if (prev == 0) {
    html += "<a href='#' class='page-link disabled' data-page='first'>|<</a> ";
    html += "<a href='#' class='page-link disabled' data-page='prev'><</a> ";
  } else {
    html += "<a href='#' class='page-link' data-page='first'>|<</a> ";
    html += "<a href='#' class='page-link' data-page='prev' data-value='" + prev + "'><</a> ";
  }

  for (let i = first; i <= last; i++) {
    html += "<a href='#' class='page-link' data-page='" + i + "' style='width: 50px'>" + i + "</a> ";
  }

  if (last < totalPage) {
    html += "<a href='#' class='page-link' data-page='next' data-value='" + next + "'>></a>";
    html += "<a href='#' class='page-link' data-page='last' data-value='" + totalPage + "'>>|</a>";
  } else {
    html += "<a href='#' class='page-link disabled' data-page='next'>></a>";
    html += "<a href='#' class='page-link disabled' data-page='last'>>|</a>";
  }

  document.getElementById("paging").innerHTML = html;

  const links = document.querySelectorAll("#paging a");
  links.forEach(link => {
    link.style.color = "black";
    link.style.paddingLeft = "10px";
    link.style.textDecoration = "none";
    
    if (!link.classList.contains('disabled')) {
      link.addEventListener("click", function(e) {
        e.preventDefault();
        const page = this.getAttribute('data-page');
        const value = this.getAttribute('data-value');
        let selectedPage;

        if (page === 'first') selectedPage = 1;
        else if (page === 'next' || page === 'prev' || page === 'last') selectedPage = parseInt(value);
        else selectedPage = parseInt(page);

        gridView.setPage(selectedPage - 1);
        paging(totalData, dataPerPage, pageCount, selectedPage);
      });
    }
  });

  const currentLink = document.querySelector("#paging a[data-page='" + currentPage + "']");
  if (currentLink) {
    currentLink.style.textDecoration = "none";
    currentLink.style.color = "red";
    currentLink.style.fontWeight = "bold";
  }
}

function setPageSelbox(totalData, dataPerPage) {
  const totalPage = Math.ceil(totalData / dataPerPage);
  const selBox = document.getElementById("selBox");
  
  for (let i = 1; i <= totalPage; i++) {
    const option = document.createElement("option");
    option.value = i;
    option.text = i;
    selBox.appendChild(option);
  }

  selBox.addEventListener("change", function() {
    const totalData = dataProvider.getRowCount();
    const dataPerPage = 8;
    const pageCount = 3;
    const selectedPage = parseInt(this.value);

    gridView.setPage(selectedPage - 1);
    paging(totalData, dataPerPage, pageCount, selectedPage);
  });
}
```

```js
//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)
   })
}
```