Pagination with <- and -> keys in javascript and jquery

Question

I am trying to do pagination like the below attached image in a table in jQuery. I tried to achieve that using the below code in jsfiddle. Only 1 2 3 options are working.

1. how to add the forward and backward arrow keys for navigation
2. And also I need to know how to add the Displaying 10 of 25 entries in the way in the image. Can anyone tell how to do that. Thanks in advance.

---

Note: Jquery version:3.4.1 Bootsrap version: 4.3.1

$(document).ready(function() {
  $('#data').after('<div id="nav"></div>');
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;
  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
  }
  $('#data tbody tr').hide();
  $('#data tbody tr').slice(0, rowsShown).show();
  $('#nav a:first').addClass('active');
  $('#nav a').bind('click', function() {

    $('#nav a').removeClass('active');
    $(this).addClass('active');
    var currPage = $(this).attr('rel');

    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
    css('display', 'table-row').animate({
      opacity: 1
    }, 300);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3 </td></tr>
  <tr><td>Row 4</td></tr>
  <tr><td>Row 5</td></tr>
  <tr><td>Row 6</td></tr>
  <tr><td>Row 7</td></tr>
  <tr><td>Row 8</td></tr>
  <tr><td>Row 9</td></tr>
  <tr><td>Row 10</td></tr>
  <tr><td>Row 11</td></tr>
  <tr><td>Row 12</td></tr>
  <tr><td>Row 13</td></tr>
  <tr><td>Row 14</td></tr>
  <tr><td>Row 15</td></tr>
  <tr><td>Row 16</td></tr>
  <tr><td>Row 17</td></tr>
  <tr><td>Row 18</td></tr>
  <tr><td>Row 19</td></tr>
  <tr><td>Row 20</td></tr>
  <tr><td>Row 21</td></tr>
  <tr><td>Row 22</td></tr>
  <tr><td>Row 23</td></tr>
  <tr><td>Row 24</td></tr>
  <tr><td>Row 25</td></tr>
</table>

Answer 1

I moved the arrows and gave them a class.

Then I interrogate the active nav link

I also changed the deprecated .bind to .on

Added the "showing x of y" too

$(document).ready(function() {
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;

  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
  }


  $('#nav a').on('click', function() {
    $('#nav a').removeClass('active');
    $(this).addClass('active'); // add not(".arrow"). if inside nav

    var currPage = $(this).attr('rel');
    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem)
      .css('display', 'table-row').animate({
        opacity: 1
      }, 300);
    $("#rowof").html(`Showing ${startItem+1} to ${endItem>=rowsTotal?rowsTotal:endItem} of ${rowsTotal}`);
  });

  
  $("#navContainer .arrow").on("click", function() {
    var currentPage = +$('#nav a.active').attr("rel");
    var prev = this.id === "prev";
    if (currentPage === 0 && prev); // nothing
    else if (currentPage === +$('#nav a:last').attr("rel") && !prev); // nothing
    else {
      currentPage += prev ? -1 : 1;
      $("#nav a").eq(currentPage).click();
    }
  })

  $('#data tbody tr').hide();
  $("#nav a").eq(0).click();
  
});

a {
  text-decoration: none;
  padding: 2px
}

.active {
  text-decoration: underline
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tbody>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3 </td></tr>
  <tr><td>Row 4</td></tr>
  <tr><td>Row 5</td></tr>
  <tr><td>Row 6</td></tr>
  <tr><td>Row 7</td></tr>
  <tr><td>Row 8</td></tr>
  <tr><td>Row 9</td></tr>
  <tr><td>Row 10</td></tr>
  <tr><td>Row 11</td></tr>
  <tr><td>Row 12</td></tr>
  <tr><td>Row 13</td></tr>
  <tr><td>Row 14</td></tr>
  <tr><td>Row 15</td></tr>
  <tr><td>Row 16</td></tr>
  <tr><td>Row 17</td></tr>
  <tr><td>Row 18</td></tr>
  <tr><td>Row 19</td></tr>
  <tr><td>Row 20</td></tr>
  <tr><td>Row 21</td></tr>
  <tr><td>Row 22</td></tr>
  <tr><td>Row 23</td></tr>
  <tr><td>Row 24</td></tr>
  <tr><td>Row 25</td></tr>
  </tbody>  
</table>
<div id="navContainer">
  <a href="#" class="arrow" id="prev">⬅️</a>
  <span id="nav"></span>
  <a href="#" class="arrow" id="next">➡️</a> <span id="rowof"></span>
</div>

Answer 2

you have to edit your js code, define currpage globally outside $('#nav a').bind(.... so just before the loop you can append the previous link, and add the next link just after the loop

$(document).ready(function() {
  var currPage = 0;

  $('#data').after('<div id="nav"></div>');
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;

  $('#nav').append('<a href="#" id="prev" rel="' + (((currPage - 1) >= 0) ? (currPage - 1) : 0) + '" ><</a> ');
  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
  }
  $('#nav').append('<a href="#" id="next" rel="' + (((currPage + 1) < numPages) ? (currPage + 1) : numPages - 1) + '" >></a> ');

  $('<span>showing ' + rowsShown + ' of ' + rowsTotal + '</span>').insertAfter('#nav')
  $('#data tbody tr').hide();
  $('#data tbody tr').slice(0, rowsShown).show();
  $('#nav a:first').addClass('active');
  $('#nav a').on('click', function() {

    $('#nav a').removeClass('active');
    $(this).addClass('active');
    currPage = parseInt($(this).attr('rel'));
    $(document).find('#prev').attr('rel', (((currPage - 1) >= 0) ? (currPage - 1) : 0));

    $(document).find('#next').attr('rel', (((currPage + 1) < numPages) ? (currPage + 1) : numPages));
    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
    css('display', 'table-row').animate({
      opacity: 1
    }, 300);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3 </td></tr>
  <tr><td>Row 4</td></tr>
  <tr><td>Row 5</td></tr>
  <tr><td>Row 6</td></tr>
  <tr><td>Row 7</td></tr>
  <tr><td>Row 8</td></tr>
  <tr><td>Row 9</td></tr>
  <tr><td>Row 10</td></tr>
  <tr><td>Row 11</td></tr>
  <tr><td>Row 12</td></tr>
  <tr><td>Row 13</td></tr>
  <tr><td>Row 14</td></tr>
  <tr><td>Row 15</td></tr>
  <tr><td>Row 16</td></tr>
  <tr><td>Row 17</td></tr>
  <tr><td>Row 18</td></tr>
  <tr><td>Row 19</td></tr>
  <tr><td>Row 20</td></tr>
  <tr><td>Row 21</td></tr>
  <tr><td>Row 22</td></tr>
  <tr><td>Row 23</td></tr>
  <tr><td>Row 24</td></tr>
  <tr><td>Row 25</td></tr>
</table>

Answer 3

You can use the :visible selector in order to get the items that are displayed on the current page. Make use of the .active class in addition to hte [rel] attribute selector in order to get the previous/next paging link, then trigger its click handler using trigger("click").

$(document).ready(function() {
  $('#data').after('<div id="nav"></div>');
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;
  var currPage = 0;
  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
  }
  $('#data tbody tr').hide();
  $('#data tbody tr').slice(0, rowsShown).show();
  $('#nav').after('<div id="stats">Displaying ' + $('#data tbody tr:visible').length + ' of ' + rowsTotal + ' items</div>');
  $('#nav a:first').addClass('active');
  $('#nav a').on('click', function() {

    $('#nav a').removeClass('active');
    $(this).addClass('active');
    currPage = $(this).attr('rel');

    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
    css('display', 'table-row').animate({
      opacity: 1
    }, 300);
    $('#stats').text('Displaying ' + $('#data tbody tr:visible').length + ' of ' + rowsTotal + ' items');
  });

  $('<a href="#">&lt;</a> ').prependTo('#nav').on('click', function() {
    $('#nav a[rel].active').prev('a[rel]').trigger('click');
  });

  $('<a href="#">&gt;</a>').appendTo('#nav').on('click', function() {
    $('#nav a[rel].active').next('a[rel]').trigger('click');
  });
});

.active {
  font-weight: bold;
}

#nav a {
  display: inline-block;
  float: left;
  padding: 5px;
}

#nav {
  overflow: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tr>
    <td>Row 1</td>
  </tr>
  <tr>
    <td>Row 2</td>
  </tr>
  <tr>
    <td>Row 3 </td>
  </tr>
  <tr>
    <td>Row 4</td>
  </tr>
  <tr>
    <td>Row 5</td>
  </tr>
  <tr>
    <td>Row 6</td>
  </tr>
  <tr>
    <td>Row 7</td>
  </tr>
  <tr>
    <td>Row 8</td>
  </tr>
  <tr>
    <td>Row 9</td>
  </tr>
  <tr>
    <td>Row 10</td>
  </tr>
  <tr>
    <td>Row 11</td>
  </tr>
  <tr>
    <td>Row 12</td>
  </tr>
  <tr>
    <td>Row 13</td>
  </tr>
  <tr>
    <td>Row 14</td>
  </tr>
  <tr>
    <td>Row 15</td>
  </tr>
  <tr>
    <td>Row 16</td>
  </tr>
  <tr>
    <td>Row 17</td>
  </tr>
  <tr>
    <td>Row 18</td>
  </tr>
  <tr>
    <td>Row 19</td>
  </tr>
  <tr>
    <td>Row 20</td>
  </tr>
  <tr>
    <td>Row 21</td>
  </tr>
  <tr>
    <td>Row 22</td>
  </tr>
  <tr>
    <td>Row 23</td>
  </tr>
  <tr>
    <td>Row 24</td>
  </tr>
  <tr>
    <td>Row 25</td>
  </tr>
</table>

Answer 4

You have pretty much all done, all you have to do is to create the button and check where current_page is and make sure you fire the click() method to that nav item...

var current_page = 0;
$(document).ready(function() {
   
   

  $('#data').after('<div id="nav"></div>');
  var rowsShown = 4;
  var rowsTotal = $('#data tbody tr').length;
  var numPages = rowsTotal / rowsShown;
  for (i = 0; i < numPages; i++) {
    var pageNum = i + 1;
    $('#nav').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
  }
  
  $('.left-pag').on('click', function() { 
      if(current_page > 0) current_page--;
      $("#nav a").eq(current_page).click();
   });
   
   $('.right-pag').on('click', function() { 
      if(current_page < numPages-1) current_page++;
      $("#nav a").eq(current_page).click();
   });
  
  $('#data tbody tr').hide();
  $('#data tbody tr').slice(0, rowsShown).show();
  $('#nav a:first').addClass('active');
  $('#nav a').bind('click', function() {

    $('#nav a').removeClass('active');
    $(this).addClass('active');
    var currPage = $(this).attr('rel');
    current_page = currPage;

    var startItem = currPage * rowsShown;
    var endItem = startItem + rowsShown;
    $('#data tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
    css('display', 'table-row').animate({
      opacity: 1
    }, 300);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="data">
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3 </td></tr>
  <tr><td>Row 4</td></tr>
  <tr><td>Row 5</td></tr>
  <tr><td>Row 6</td></tr>
  <tr><td>Row 7</td></tr>
  <tr><td>Row 8</td></tr>
  <tr><td>Row 9</td></tr>
  <tr><td>Row 10</td></tr>
  <tr><td>Row 11</td></tr>
  <tr><td>Row 12</td></tr>
  <tr><td>Row 13</td></tr>
  <tr><td>Row 14</td></tr>
  <tr><td>Row 15</td></tr>
  <tr><td>Row 16</td></tr>
  <tr><td>Row 17</td></tr>
  <tr><td>Row 18</td></tr>
  <tr><td>Row 19</td></tr>
  <tr><td>Row 20</td></tr>
  <tr><td>Row 21</td></tr>
  <tr><td>Row 22</td></tr>
  <tr><td>Row 23</td></tr>
  <tr><td>Row 24</td></tr>
  <tr><td>Row 25</td></tr>
</table>
<button class="left-pag">Previous</button>
<button class="right-pag">Next</button>