添加prev&下一个李的分页功能

时间:2013-01-19 13:30:41

标签: javascript

我想将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的工作因此它跳到prev页面的下一个步骤1.它还应该添加或删除基于最后一页或第一页的“活动”类,因为它没有意义能够如果您在第一页,请单击“上一步”按钮。

0 个答案:

没有答案