分页中的"go to"问题

Question

我的分页中有一些带有"go to"的阻止程序。主要是当我在输入中输入"数字"，点击转到，页面正在更改但分页中的"当前页面"未处于活动状态时，以及当我转到例如 3 的页面时，我无法使用"下一步"按钮转到更高的页面，但我可以回到 2,1。

function getPageList(totalPages, page, maxLength) {
if (maxLength < 5) throw 'maxLength must be at least 5';
function range(start, end) {
return Array.from(Array(end - start + 1), (_, i) => i + start);
}
var sideWidth = maxLength < 9 ? 1 : 2;
var leftWidth = (maxLength - sideWidth*2 - 3) >> 1;
var rightWidth = (maxLength - sideWidth*2 - 2) >> 1;
if (totalPages <= maxLength) {
// no breaks in list
return range(1, totalPages);
}
if (page <= maxLength - sideWidth - 1 - rightWidth) {
// no break on left of page
return range(1, maxLength-sideWidth-1)
.concat([0])
.concat(range(totalPages-sideWidth+1, totalPages));
}
if (page >= totalPages - sideWidth - 1 - rightWidth) {
// no break on right of page
return range(1, sideWidth)
.concat([0])
.concat(range(totalPages - sideWidth - 1 - rightWidth - leftWidth, totalPages));
}
// Breaks on both sides
return range(1, sideWidth)
.concat([0])
.concat(range(page - leftWidth, page + rightWidth))
.concat([0])
.concat(range(totalPages-sideWidth+1, totalPages));
}
$(function () {
// Number of items and limits the number of items per page
var numberOfItems = $('#jar .content').length;
var limitPerPage = 4;
// Total pages rounded upwards
var totalPages = Math.ceil(numberOfItems / limitPerPage);
// Number of buttons at the top, not counting prev/next,
// but including the dotted buttons.
// Must be at least 5:
var paginationSize = 8;
var currentPage;
function showPage(whichPage) {
if (whichPage < 1 || whichPage > totalPages) return false;
currentPage = whichPage;
$('#jar .content').hide()
.slice((currentPage-1) * limitPerPage,
currentPage * limitPerPage).show();
// Replace the navigation items (not prev/next):
$('.pagination li').slice(1, -1).remove();
getPageList(totalPages, currentPage, paginationSize).forEach( item => {
$('<li>').addClass('page-item')
.addClass(item ? 'current-page' : 'disabled')
.toggleClass('active', item === currentPage).append(
$('<a>').addClass('page-link').attr({
href: 'javascript:void(0)'}).text(item || '...')
).insertBefore('#next-page');
});
// Disable prev/next when at first/last page:
$('#previous-page').toggleClass('disabled', currentPage === 1);
$('#previous-slick').toggleClass('slick-disabled', currentPage === 1);
$('#next-page').toggleClass('disabled', currentPage === totalPages);
$('#next-slick').toggleClass('slick-disabled', currentPage === totalPages);
return true;
}
// Include the prev/next buttons:
$('.pagination').append(
$('<li>').addClass('page-item').attr({ id: 'previous-page' }).append(
$('<button>').addClass('page-link slick-prev').attr({ id: 'previous-slick' }).text('prev')
),
$('<li>').addClass('page-item').attr({ id: 'next-page' }).append(
$('<button>').addClass('page-link slick-next').attr({ id: 'next-slick' }).text('next')
)
);
// Show the page links
$('#jar').show();
showPage(1);
// Use event delegation, as these items are recreated later
$(document).on('click', '.pagination li.current-page:not(.active)', function () {
return showPage(+$(this).text());
});
$('#next-page').on('click', function () {
return showPage(currentPage+1);
});
$('#previous-page').on('click', function () {
return showPage(currentPage-1);
});
var $btn = $('.go-to');
$btn.on('click', function () {
var $inputPageVal = $('input.page-number').val();
return showPage($inputPageVal);
})
});

这里也是JsFiddle来检查问题所在：http://jsfiddle.net/yf0g1ceh/12/

Answer 1

您可以根据currentPage === totalPages等条件禁用上一个/下一个按钮，这会考虑数据类型。如果将字符串6与数字6进行比较，则结果为false。

尝试确保使用整数调用函数。

例如：

$btn.on('click', function () {
var $inputPageVal = $('input.page-number').val();
return showPage(parseInt($inputPageVal, 10));
})