我想将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) + '">«</a></li>';
var next = '<li id="paginext"><a href="#' + (currentPage + 1) + '">»</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) + '">«</a></li>';
var next = '<li id="paginext"><a href="#' + (currentPage + 1) + '">»</a></li>';
$pager.append(next);
$pager.prepend(prev);
但显然这并不像我想象的那么容易。当然,制作下一个和上一个li的工作因此它跳到prev页面的下一个步骤1.它还应该添加或删除基于最后一页或第一页的“活动”类,因为它没有意义能够如果您在第一页,请单击“上一步”按钮。