Next
Prev

You can create the Page Navigation with KoolGrid. This example demonstrates how to create a Page Navigation, the number of rows on a page is 20.

[HTML]
...
<div id="gridHolder"></div>
<div class="gridPaging" id="gridPageNavigationDiv"></div>

[JavaScript]
  var gridTotalRowCount = 580;   // The total number of data records. It must be defined in the HTML
  var gridRowsPerPage = 20;      // The number of rows displayed in a page.
  var gridViewPageCount = 10;    // The number of pages displayed in the page navigation.
  var gridCurrentPage = 1;       // Current page number
  // Calculating the total number of pages
  var gridTotalPage = Math.ceil(gridTotalRowCount / gridRowsPerPage);

  // Next, Previous, First, Last - Image can be used
  var gridStartTxt = "<<";
  var gridEndTxt = ">>";
  var gridPrevTxt = "◀";
  var gridNextTxt = "▶";
  // Separator between the pages - If you don't want to use it, then enter the space.
  var gridPageGapTxt = " | ";

function drawGridPagingNavigation(goPage) {
  if (gridTotalPage == 0) {
    gridPageNavigationDiv.innerHTML = "<span class='gridPagingDisable'>" + gridStartTxt + "</span> <span class='gridPagingDisable'>" + gridPrevTxt + "</span> <span class='gridPagingDisable'>" + gridNextTxt + "</span> <span class='gridPagingDisable'>" + gridEndTxt + "</span>";
    return;
  }

  var retStr = "";
  var prepage = parseInt((goPage - 1)/gridViewPageCount) * gridViewPageCount;
  var nextpage = ((parseInt((goPage - 1)/gridViewPageCount)) * gridViewPageCount) + gridViewPageCount + 1;

  // Go to First
  retStr += "<span class=";
  if (goPage > 1) {
    retStr += "'gridPagingMove'><a href='javascript:gridMovePage(1)'>" + gridStartTxt + "</a></span> ";
  } else {
    retStr += "'gridPagingDisable'>" + gridStartTxt + "</span> ";
  }

  // Go to Next
  retStr += "<span class=";
  if (goPage > gridViewPageCount) {
    retStr += "'gridPagingMove'><a href='javascript:gridMovePage(" + prepage + ")'>" + gridPrevTxt + "</a></span> ";
  } else {
    retStr += "'gridPagingDisable'>" + gridPrevTxt + "</span> ";
  }

  for (var i = (1 + prepage); i < gridViewPageCount + 1 + prepage; i++) {
    if (goPage == i) {
      retStr += "<span class='gridPagingCurrent'>";
      retStr += i;
      retStr += "</span>";
    } else {
      retStr += "<span>";
      retStr += "<a href='javascript:gridMovePage(" + i + ")'>" + i + "</a>";
      retStr += "</span>";
    }

    if (i >= gridTotalPage) {
      retStr += " ";
      break;
    }

    if (i == gridViewPageCount + prepage)
      retStr += " ";
    else
      retStr += gridPageGapTxt;
  }

  // Go to Previous
  retStr += "<span class=";
  if (nextpage <= gridTotalPage) {
    retStr += "'gridPagingMove'><a href='javascript:gridMovePage(" + nextpage + ")'>" + gridNextTxt + "</a></span> ";
  } else {
    retStr += "'gridPagingDisable'>" + gridNextTxt + "</span> ";
  }

  // Go to Last
  retStr += "<span class=";
  if (goPage != gridTotalPage) {
    retStr += "'gridPagingMove'><a href='javascript:gridMovePage(" + gridTotalPage + ")'>" + gridEndTxt + "</span>";
  } else {
    retStr += "'gridPagingDisable'>" + gridEndTxt + "</span>";
  }
  
  gridPageNavigationDiv.innerHTML = retStr;
}

function gridMovePage(goPage) {
  gridApp.setDataURLEx("https://www.koolchart.com/koolgrid/server/gridPagingData.php?page="+goPage);
  drawGridPagingNavigation(goPage);
  gridCurrentPage = goPage;
}

© 2017 KoolChart. All rights reserved.