// 定义分页器构造函数
function Pagination($container, options) {
this.$container = $container;
this.options = $.extend({}, Pagination.DEFAULTS, options);
this.render();
this.bindEvents();
}
// 默认参数
Pagination.DEFAULTS = {
currentPage: 1,
totalPages: 10,
visiblePages: 5
};
// 渲染分页器
Pagination.prototype.render = function() {
var html = this.getHtml();
this.$container.html(html);
};
// 获取分页器HTML结构
Pagination.prototype.getHtml = function() {
var html = '';
var totalPages = this.options.totalPages;
var currentPage = this.options.currentPage;
var visiblePages = this.options.visiblePages;
var startPage, endPage;
if (totalPages <= visiblePages) {
startPage = 1;
endPage = totalPages;
} else {
// 计算开始和结束页码
var middle = Math.floor(visiblePages / 2);
startPage = currentPage - middle;
endPage = currentPage + visiblePages - middle - 1;
// 如果开始页码小于1,则向后移动
if (startPage < 1) {
endPage = endPage - (1 - startPage);
startPage = 1;
}
// 如果结束页码大于总页数,则向前移动
if (endPage > totalPages) {
startPage = startPage - (endPage - totalPages);
endPage = totalPages;
}
}
// 添加首页和前一页的按钮
html += '<a href="?page=1" class="first-page' + (currentPage === 1 ? ' disabled' : '') + '">首页</a>';
html += '<a href="?page=' + (currentPage - 1) + '" class="prev-page' + (currentPage === 1 ? ' disabled' : '') + '">«</a>';
// 添加页码
for (var i = startPage; i <= endPage; i++) {
html += '<a href="?page=' + i + '" class="page-number' + (i === currentPage ? ' active' : '') + '">' + i + '</a>';
}
// 添加后一页和末页按钮
html += '<a href="?page=' + (currentPage + 1) + '" class="next-page' + (currentPage === totalPages ? ' disabled' : '') + '">»</a>';
html += '<a href="?page=' + totalPages + '" class="last-page' + (currentPage === totalPages ? ' disabled' : '') + '">末页</a>';
return html;
};
// 绑定分页器事件
Pagination.prototype.bindEvents = function() {
var that = this;
this.$container.on('click', '.page-number, .first-page, .last-page, .prev-page, .next-page', function(e) {
e.preventDefault();
var $this = $(this);
if (!$this.hasClass('disabled')) {
var page = $this.attr('
评论已关闭