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

Question

我没有。页数，但我想通过使用下一页和上一页按钮显示加载的 5 页来限制它 which shows pages number .

我的代码是:

  <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>

我的分页如下: “第一个 上一个 1 2 3 4 5 下一个 最后一个”

希望你们明白？

提前致谢。

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/