使用下一个和上一个按钮分页，并且仅使用jQuery在HTML表格中加载显示5页

Question

I got a no. of pages but I want to restrict it by showing 5 pages on load with next and previous buttons which shows pages number.

My code is:

  <script>
    $(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>');
      var $previous = $('<span class="previous"><<</spnan>');
      var $next = $('<span class="next">>></spnan>');
      for (i = 0; i < totalPages; i++) {
         $('<span>' + (i + 1) + '</span>').appendTo($pages);     
      }
      $pages.appendTo('#MyTable');

      $('#MyTable').find('tbody tr:has(td)').hide();
      var tr = $('#MyTable 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();
        }
      });
    });
    </script>

I've made my pagination like: "first previous 1 2 3 4 5 next last"

I hope you guys understand?

Thanks in advance.

Answer 1

Hi, You can create simple pagination using the TWBS pagination JS library. here is a quick example of pagination on codepen it might help you.

example code on codepen

https://codepen.io/SitePoint/pen/WprNwa/