js table 分页类

JavaScript中的表格分页是一种常见的功能，它允许用户在大型数据集中浏览和查看数据。分页类可以帮助开发者轻松实现这一功能。下面是一个基础的表格分页类的概念、优势、类型、应用场景以及可能遇到的问题和解决方案。

基础概念

表格分页类是一个JavaScript对象或模块，它负责将大型表格数据分割成较小的部分，称为“页”，并允许用户通过导航按钮在这些页之间切换。

优势

提高性能：只加载当前页的数据，减少初始加载时间和内存使用。
改善用户体验：用户可以快速找到所需信息，而不必滚动长长的列表。
易于实现和维护：使用现成的分页类可以简化开发流程。

类型

客户端分页：所有数据一次性加载到客户端，然后分页显示。
服务器端分页：每次只从服务器请求当前页的数据。

应用场景

电子商务网站的产品列表
社交媒体平台的时间线
管理后台的数据表格

示例代码（客户端分页）

class TablePagination {
  constructor(tableId, data, itemsPerPage) {
    this.table = document.getElementById(tableId);
    this.data = data;
    this.itemsPerPage = itemsPerPage;
    this.currentPage = 1;
    this.totalPages = Math.ceil(data.length / itemsPerPage);
    this.render();
  }

  render() {
    const start = (this.currentPage - 1) * this.itemsPerPage;
    const end = start + this.itemsPerPage;
    const pageData = this.data.slice(start, end);

    // 清空现有表格内容
    this.table.innerHTML = '';

    // 填充新数据
    pageData.forEach(row => {
      const tr = document.createElement('tr');
      Object.values(row).forEach(val => {
        const td = document.createElement('td');
        td.textContent = val;
        tr.appendChild(td);
      });
      this.table.appendChild(tr);
    });

    // 渲染分页导航
    this.renderPagination();
  }

  renderPagination() {
    const pagination = document.createElement('div');
    for (let i = 1; i <= this.totalPages; i++) {
      const button = document.createElement('button');
      button.textContent = i;
      button.addEventListener('click', () => {
        this.currentPage = i;
        this.render();
      });
      pagination.appendChild(button);
    }
    this.table.parentNode.insertBefore(pagination, this.table.nextSibling);
  }
}

// 使用示例
const data = [
  // 假设这里有很多行数据
];
new TablePagination('myTable', data, 10);