ページネーション機能に 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);
しかし、思ったほど簡単ではないようです。もちろん、次のページと前のページの次のページにジャンプするように次のページと前のページを作成するのがステップ 1 です。最初のページにいる場合は、前のボタンをクリックしてください。