表分页，显示链接

Table pagination, displaying links

本文关键字：链接 显示 分页      更新时间：2023-09-26

我有一个大约350行的表，我想对它进行分页，使其更易于用户管理。它将页面分成10组，然后显示所有的页面链接。我希望页面链接如下所示:1,2,3,4…35(或者不管最后一页是什么)。这就是我现在被卡住的地方。

这段代码可以工作，但我不知道如何以这种方式显示链接。如有任何帮助，不胜感激。

$('table.table-styled').each(function() {
    var currentPage = 0;
    var rowsPerPage = 10;
    var $table = $(this); 
    $table.bind('repaginate', function(){
        $table.find('tbody tr').hide().slice(currentPage * rowsPerPage, (currentPage + 1) * rowsPerPage).show();
    });
    $table.trigger('repaginate');
    var numRows = $table.find('tbody tr').length;
    var numPages = Math.ceil(numRows / rowsPerPage);
    var $pager = $('<div class="pager"></div>');
    for (var page = 0; 
         page < numPages; page++){
        $('<span class="page-number"></span>').text(page + 1).bind('click', {
            newPage: page
        }, function(event){ console.log(currentPage);
            currentPage = event.data['newPage'];
            $table.trigger('repaginate');
            $(this).addClass('active').siblings().removeClass('active');

        }).appendTo($pager).addClass('clickable');
    }
    $pager.insertBefore($table).find('span.page-number:first').addClass('active');
});

谢谢。

我在前段时间创建了一个小的jQuery插件，名为jQuery-paging。虽然你的页面使用的是静态页面(而不是像我的页面那样加载所请求的页面)，但你应该能够根据自己的需要进行调整。

你可能感兴趣的部分是-

function addLi(ul, text, page) {
  var li = $("<li>" + text + "</li>");
  li.data("paging", { page: page });
  ul.append(li);
}

, 

$this.empty();
  var pages = parseInt(settings.pages);
  var currentPage = parseInt(settings.currentPage);
  var first = "<span class='ui-icon ui-icon-seek-first'></span>";
  var last = "<span class='ui-icon ui-icon-seek-end'></span>";
  var prev = "<span class='ui-icon ui-icon-seek-prev'></span>";
  var next = "<span class='ui-icon ui-icon-seek-next'></span>";
  var ul = $("<ul></ul>");
  $this.addClass("pagingList");
  $this.append(ul);
  if (currentPage > 1) {
    // Add first & prev
    addLi(ul, first, 1);
    addLi(ul, prev, currentPage - 1);
  }
  if (currentPage === pages && pages > 4) {
    // Add currentPage - 4
    addLi(ul, currentPage - 4, currentPage - 4);
  }
  if (currentPage > pages - 1 && pages > 3) {
    // Add currentPage - 3
    addLi(ul, currentPage - 3, currentPage - 3);
  }
  if (currentPage > 2) {
    // Add currentPage - 2
    addLi(ul, currentPage - 2, currentPage - 2);
  }
  if (currentPage > 1) {
    // Add currentPage - 1
    addLi(ul, currentPage - 1, currentPage - 1);
  }
  // Add current page
  addLi(ul, "<b>" + currentPage + "</b>", currentPage);
  if (pages > currentPage) {
    // Add current page + 1
    addLi(ul, currentPage + 1, currentPage + 1);
  }
  if (pages > currentPage + 1) {
    // Add current page + 2
    addLi(ul, currentPage + 2, currentPage + 2);
  }
  if (currentPage < 3 && pages > currentPage + 2) {
    // Add current page + 3
    addLi(ul, currentPage + 3, currentPage + 3);
  }
  if (currentPage === 1 && pages > currentPage + 3) {
    // Add current page + 4
    addLi(ul, currentPage + 4, currentPage + 4);
  }
  if (currentPage < pages) {
    // Add next & last
    addLi(ul, next, currentPage + 1);
    addLi(ul, last, pages);
  }
相关文章：