0

我想将 prev 和 next li 添加到我的分页功能中。该函数本身可以完美运行，并根据您希望从下拉列表接收的行数显示页面数量 .val();

function pagination() {
    $('table[data-provide=pagination]').each(function () {

        var $table = $('#foo');
        var $pager = $('<ul></ul>');

        var currentPage = 0;
        var numPerPage = $("#bar").val();
        var numRows = $table.find('.someclass').length;
        var numPages = Math.ceil(numRows / numPerPage);

        $table.unbind('repaginate');

        $table.bind('repaginate', function () {
            $table.find('.someclass').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
        });

        for (var page = 0; page < numPages; page++) {
            var link = '<a href="#">' + page + '</a>';

            $('<li></li>').html(link).on('click', {
                newPage: page
            }, function (event) {
                currentPage = event.data['newPage'];
                $table.trigger('repaginate');
                $(this).addClass('active').siblings().removeClass('active');
            }).appendTo($pager);
        };

        var prev = '<li id="pagiprev"><a href="#' + (currentPage - 1) + '">&laquo</a></li>';
        var next = '<li id="paginext"><a href="#' + (currentPage + 1) + '">&raquo</a></li>';

        $pager.append(next);
        $pager.prepend(prev);

        $pager.find("li:first-child").addClass('active');

        $($table.data('pager')).html($pager);
        $table.trigger('repaginate');
    });
};

现在我添加了：

var prev = '<li id="pagiprev"><a href="#' + (currentPage - 1) + '">&laquo</a></li>';
var next = '<li id="paginext"><a href="#' + (currentPage + 1) + '">&raquo</a></li>';

$pager.append(next);
$pager.prepend(prev);

但显然这并不像我想象的那么容易。当然，使下一个和上一个 li 的工作跳到上一个页面的下一个是第 1 步。它还应该根据最后一页或第一页添加或删除“活动”类，因为它没有意义能够如果您在第一页，请单击上一个按钮。

4

0 回答 0