使用jQuery封装翻页器

(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 = `
      

        

          上一页
        
        ${pages.map(function(page) {
          const activeClass = page === settings.current ? 'active' : '';
          return `
            

              ${page}
            
          `;
        }).join('')}
        

          下一页
        
      
    `;
    $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 插入到翻页器容器中，并使用事件委托为页码绑定点击事件。当点击页码时，插件会更新当前页码，重新绘制翻页器，并调用回调函数通知外部代码页码已经变化。