<div class="pagination"></div>
(function($) {
$.fn.pagination = function(options) {
const defaults = {
current: 1, // 当前页码
total: 10, // 总页数
visiblePages: 5, // 可见页码数量
onPageClick: function(page) {} // 点击页码的回调函数
};
const settings = $.extend({}, defaults, options);
const $pagination = this;
const halfVisible = Math.floor(settings.visiblePages / 2);
let start = Math.max(1, settings.current - halfVisible);
let end = Math.min(settings.total, start + settings.visiblePages - 1);
start = Math.max(1, end - settings.visiblePages + 1);
const pages = [];
for (let i = start; i <= end; i++) {
pages.push(i);
}
const prevClass = settings.current === 1 ? 'disabled' : '';
const nextClass = settings.current === settings.total ? 'disabled' : '';
const html = `
<ul class="pagination">
<li class="page-item ${prevClass}">
<a class="page-link" href="#" data-page="${settings.current - 1}">上一页</a>
</li>
${pages.map(function(page) {
const activeClass = page === settings.current ? 'active' : '';
return `
<li class="page-item ${activeClass}">
<a class="page-link" href="#" data-page="${page}">${page}</a>
</li>
`;
}).join('')}
<li class="page-item ${nextClass}">
<a class="page-link" href="#" data-page="${settings.current + 1}">下一页</a>
</li>
</ul>
`;
$pagination.html(html);
$pagination.on('click', 'a', function(event) {
event.preventDefault();
const page = parseInt($(this).data('page'));
if (page >= 1 && page <= settings.total && page !== settings.current) {
settings.current = page;
$pagination.pagination(settings);
settings.onPageClick(page);
}
});
return $pagination;
};
})(jQuery);
该代码通过 jQuery 的插件机制,将翻页器封装为一个 jQuery 插件。该插件接收一个对象作为参数,用于配置翻页器的各种属性,包括当前页码、总页数、可见页码数量和点击页码的回调函数。在插件内部,首先通过 Math.max 和 Math.min 方法计算出可见的页码范围,然后使用 map 方法将页码转换为 HTML。最后,将 HTML 插入到翻页器容器中,并使用事件委托为页码绑定点击事件。当点击页码时,插件会更新当前页码,重新绘制翻页器,并调用回调函数通知外部代码页码已经变化。