首页 > 其他分享 >用js封装一个前端分页的库,说说你的思路

用js封装一个前端分页的库,说说你的思路

时间:2024-12-02 09:36:10浏览次数:3  
标签:total 封装 分页 page currentPage js 页码 options Math

class Pagination {
  constructor(options) {
    this.options = Object.assign({
      total: 0, // 总数据量
      pageSize: 10, // 每页显示数量
      currentPage: 1, // 当前页码
      showPages: 5, // 显示的页码数量
      container: null, // 分页容器元素
      onPageChange: null, // 页码改变时的回调函数
    }, options);

    if (!this.options.container) {
      throw new Error("Container element is required.");
    }

    this.render();
  }

  render() {
    const { total, pageSize, currentPage, showPages, container } = this.options;
    const totalPages = Math.ceil(total / pageSize);

    // 边界处理
    let startPage = Math.max(1, currentPage - Math.floor(showPages / 2));
    let endPage = Math.min(totalPages, startPage + showPages - 1);

    if (endPage - startPage + 1 < showPages) {
      startPage = Math.max(1, endPage - showPages + 1);
    }

    const fragment = document.createDocumentFragment();

    // 首页
    this.createPageItem(fragment, 1, '首页', currentPage === 1);

    // 上一页
    this.createPageItem(fragment, currentPage - 1, '上一页', currentPage === 1);

    // 页码
    for (let i = startPage; i <= endPage; i++) {
      this.createPageItem(fragment, i, i, currentPage === i);
    }

    // 下一页
    this.createPageItem(fragment, currentPage + 1, '下一页', currentPage === totalPages);

    // 尾页
    this.createPageItem(fragment, totalPages, '尾页', currentPage === totalPages);


    // 清空容器
    container.innerHTML = '';
    container.appendChild(fragment);
  }


  createPageItem(fragment, page, text, disabled) {
    const li = document.createElement('li');
    const a = document.createElement('a');
    a.href = 'javascript:void(0)'; // 阻止默认跳转
    a.textContent = text;
    a.classList.toggle('disabled', disabled || page < 1 || page > Math.ceil(this.options.total / this.options.pageSize));

    if (!disabled && page >= 1 && page <= Math.ceil(this.options.total / this.options.pageSize)) {
      a.addEventListener('click', () => {
        this.options.currentPage = page;
        this.render();
        if (this.options.onPageChange) {
          this.options.onPageChange(page);
        }
      });
    }


    li.appendChild(a);
    fragment.appendChild(li);
  }

  goToPage(page) {
    this.options.currentPage = page;
    this.render();
    if (this.options.onPageChange) {
      this.options.onPageChange(page);
    }
  }

  setTotal(total) {
    this.options.total = total;
    this.render();
  }
}


// 使用示例:
const container = document.getElementById('pagination');
const pagination = new Pagination({
  total: 100,
  container: container,
  onPageChange: (page) => {
    console.log('Current page:', page);
    // 在这里执行获取数据的操作
  }
});

思路:

  1. 面向对象封装: 使用class封装成一个可复用的Pagination类,方便实例化和管理。

  2. 参数配置: 通过构造函数options传入参数,包括总数据量、每页数量、当前页码、显示的页码数量、容器元素、页码改变时的回调函数等,使分页组件更灵活。

  3. 计算总页数: totalPages = Math.ceil(total / pageSize) 计算总页数,向上取整。

  4. 计算起始页码和结束页码: 根据当前页码和显示的页码数量计算起始和结束页码,并进行边界处理,确保页码范围的正确性。

  5. 动态创建DOM元素: 使用document.createDocumentFragment() 创建文档片段,将生成的页码元素添加到片段中,最后一次性添加到容器中,提高性能。

  6. 首页、上一页、下一页、尾页: 添加

标签:total,封装,分页,page,currentPage,js,页码,options,Math
From: https://www.cnblogs.com/ai888/p/18580932

相关文章

  • 电影售票管理系统|Java|SSM|JSP| 前后端分离
    【重要1⃣️】前后端源码+万字文档+部署文档            【包含内容】【一】项目提供非常完整的源码注释【二】相关技术栈文档【三】源码讲解视频                     【其它服务】【一】可以提供远程......
  • 分类算法学业警示管理系统|Java|SSM|JSP| 前后端分离
    【重要1⃣️】前后端源码+万字文档+部署文档            【包含内容】【一】项目提供非常完整的源码注释【二】相关技术栈文档【三】源码讲解视频                     【其它服务】【一】可以提供远程......
  • 用户在浏览器中禁用了js脚本时该怎么办?
    当用户在浏览器中禁用JavaScript时,前端开发人员需要采取措施确保网站仍然可用,或者至少提供一个优雅的降级方案。以下是一些策略:1.提供<noscript>内容:这是最基本也是最关键的一步。<noscript>标签内的内容只会在用户的浏览器禁用JavaScript或不支持JavaScript时显示。......
  • 使用js写一个时钟的程序
    <!DOCTYPEhtml><html><head><title>JavaScriptClock</title><style>body{font-family:sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;background-......
  • node.js毕设同城绿植商城程序+论文
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容一、选题背景关于同城绿植商城的研究,现有研究主要以电商平台的通用模式为主,专门针对同城绿植商城这种特定类型电商的研究较少。在国内外,电商领域已经取得了诸多成果,......
  • PbootCMS 织梦搜索结果页分页条样式修改
    编辑 /include/arc.searchview.class.php 文件,将532行左右的代码:$this->dtp->Assign($tagid,$this->GetPageListDM($list_len));修改为:$listitem=$ctag->GetAtt("listitem")==""?"index,pre,pageno,next,end,option":$ct......
  • 分类算法学业警示管理系统|Java|SSM|JSP| 前后端分离
    【重要1⃣️】前后端源码+万字文档+部署文档            【包含内容】【一】项目提供非常完整的源码注释【二】相关技术栈文档【三】源码讲解视频                     【其它服务】【一】可以提供远程......
  • JAVA开源毕业设计 医护人员排班系统 Vue.JS+SpringBoot+MySQL
    本文项目编号T014,文末自助获取源码\color{red}{T014,文末自助获取源码}......
  • JAVA开源毕业设计 美容院管理系统 Vue.JS+SpringBoot+MySQL
    本文项目编号T012,文末自助获取源码\color{red}{T012,文末自助获取源码}......
  • ESLint v9.0.0 新纪元:探索 eslint.config.js 的奥秘 (4)
    从v9.0.0开始,官方推荐的配置文件格式是eslint.config.js,并且支持ESM模块化风格,可以通过exportdefault来导出配置内容。//eslint.config.jsexportdefault[{rules:{semi:"error","prefer-const":"error"}......