How to add Previous and Next in Pagination

Question

This is my pagination

pagination.js

$(document).ready(function() {
  var totalRows = $('#myTable').find('tbody tr:has(td)').length;
  var recordPerPage = 10;
  var totalPages = Math.ceil(totalRows / recordPerPage);
  var $pages = $('<div id="pages"></div>');
  for (i = 0; i < totalPages; i++) {
    $('<span class="pageNumber">&nbsp;' + (i + 1) + '</span>').appendTo($pages);
  }
  $pages.appendTo('#myTable');

  $('.pageNumber').hover(
    function() {
      $(this).addClass('focus');
    },
    function() {
      $(this).removeClass('focus');
    }
  );

  $('table').find('tbody tr:has(td)').hide();
  var tr = $('table tbody tr:has(td)');
  for (var i = 0; i <= recordPerPage - 1; i++) {
    $(tr[i]).show();
  }
  $('span').click(function(event) {
    $('#myTable').find('tbody tr:has(td)').hide();
    var nBegin = ($(this).text() - 1) * recordPerPage;
    var nEnd = $(this).text() * recordPerPage - 1;
    for (var i = nBegin; i <= nEnd; i++) {
      $(tr[i]).show();
    }
  });
});

Table.php

<table id="myTable" class="table table-bordered "    width="100%" cellspacing="0">


</table>

Hello Guys, Can anyone help with this problem. I'm doing pagination in may patient table but my pagination is in my picture above. I want my pagination to start to "Previous 1 2 3 Next" but in my pagination is only " 1 2 3". I want to add Previous and Next. Sorry Guys, I'm just a beginner.

Answer 1

In my example I'm using a table with just 10 entries and recordPerPage is set to 2 for convenience. If there is no previous or next page, previous and next simply don't work. It could be adjusted to not show previous or next instead but maybe this isn't necessary and you're already content with this solution.

 $(document).ready(function() { var totalRows = $('#myTable').find('tbody tr:has(td)').length; var recordPerPage = 2; var totalPages = Math.ceil(totalRows / recordPerPage); var $pages = $('<div id="pages"></div>'); for (i = 0; i < totalPages; i++) { $('<span class="pageNumber">&nbsp;' + (i + 1) + '</span>').appendTo($pages); } var next = $('<span class="next" data-target="2">Next</span>'); next.appendTo($pages); var prev = $('<span class="prev" data-target="0">Previous</span>'); prev.prependTo($pages); $pages.appendTo('#myTable'); $('.pageNumber').hover( function() { $(this).addClass('focus'); }, function() { $(this).removeClass('focus'); } ); $('table').find('tbody tr:has(td)').hide(); var tr = $('table tbody tr:has(td)'); for (var i = 0; i <= recordPerPage - 1; i++) { $(tr[i]).show(); } $('span.pageNumber').click(function(event) { $('#myTable').find('tbody tr:has(td)').hide(); var nBegin = ($(this).text() - 1) * recordPerPage; var nEnd = $(this).text() * recordPerPage - 1; for (var i = nBegin; i <= nEnd; i++) { $(tr[i]).show(); } $(".next").data("target", parseInt($(this).text()) + 1); $(".prev").data("target", parseInt($(this).text()) - 1); }); $('span.next').click(function(event) { if ($(this).data("target") <= $(".pageNumber:last").text()) { $('#myTable').find('tbody tr:has(td)').hide(); var nBegin = ($(this).data("target") - 1) * recordPerPage; var nEnd = $(this).data("target") * recordPerPage - 1; for (var i = nBegin; i <= nEnd; i++) { $(tr[i]).show(); } $(this).data("target", $(this).data("target") + 1); $(".prev").data("target", $(".prev").data("target") + 1); } }); $('span.prev').click(function(event) { if ($(this).data("target") >= $(".pageNumber:first").text()) { $('#myTable').find('tbody tr:has(td)').hide(); var nBegin = ($(this).data("target") - 1) * recordPerPage; var nEnd = $(this).data("target") * recordPerPage - 1; for (var i = nBegin; i <= nEnd; i++) { $(tr[i]).show(); } $(this).data("target", $(this).data("target") - 1); $(".next").data("target", $(".next").data("target") - 1); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="myTable"> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> <tr> <td>5</td> </tr> <tr> <td>6</td> </tr> <tr> <td>7</td> </tr> <tr> <td>8</td> </tr> <tr> <td>9</td> </tr> <tr> <td>10</td> </tr> </table>

Answer 2

This may not answer your question directly but as your question says you are a beginner with JavaScript. As a beginner I'd always try to use existing plugins / librarys which solve my problems before I attempt solving them by myself.

The easiest solution for your problem would be to use something like Datatables . It offers great support for customizing and also comes with your desired pagination out-of-the-box.

If you need help converting your code to datatables ask a new question.