jquery - 如何向此 jQuery 分页添加范围?

标签 jquery

我正在使用这个 jQuery 表分页脚本,我喜欢添加一个范围而不是所有页码。

所以代替[1][2][3][4][5][6][7] 我喜欢一些东西[1][2][3][>][last]

function paginateIt() {
$("#pagination-ajax").remove();
  $('table#overviewJobs').each(function() {

    var currentPage = 0;
    var numPerPage = 7;
    var $table = $(this);

    $table.bind('repaginate', function() {

        $table.find('tbody tr').show()

                .slice(0,currentPage * numPerPage)
                .hide()
                .end()

                .slice((currentPage + 1) * numPerPage)
                .hide()
                .end();

          });

    var numRows = $table.find('tbody tr').length;
    //alert("Num of rows "+numRows);
    var numPages = Math.ceil(numRows / numPerPage);

    var $pager = $('<div id="pagination-ajax"></div>');

    if(numRows > numPerPage) {
        for (var page = 0; page < numPages; page++) {
          $('<span class="page-number">' + (page + 1) + '</span>')
           .bind('click', {'newPage': page}, function(event) {
             currentPage = event.data['newPage'];
             //numPerPage = 7;
             $table.trigger('repaginate');
             $(this).addClass('active').siblings().removeClass('active');
           })
           .appendTo($pager).addClass('clickable');
        }
        $pager.find('span.page-number:first').addClass('active');
        $pager.insertAfter($('#pagination-divider'));
    } //end if numRows
    //
    //$('#pagination').html(navigation_html);
    $table.trigger('repaginate');

  });
};

最佳答案

您可以应用 hack。找到所需的 .page-number 框索引,然后使用 gt() 删除,然后附加另一个 .page-number 框,单击它,调用下一个页码来附加。

关于jquery - 如何向此 jQuery 分页添加范围?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2473271/

相关文章:

javascript - bootstrapvalidator 必填的两个字段之一

jquery - 渲染后对 jquery fullcalendar 进行动画处理

javascript - 在数组上连续循环有问题

javascript - select2 中的右对齐下拉菜单

javascript - 将表单上的下拉菜单替换为另一个表单上的下拉菜单

javascript - 我怎样才能嵌入特定的推文但仍对其进行样式设置?

javascript - CKeditor 使用 Ajax 填充对话框选择

javascript - HTML5 : Adding an image as a canvas element

javascript - 如何获取html标题元素

jquery - 在使用 Ajax 生成的表单上使用 jquery 验证插件