实现一个简单的表格 (Table) 组件，支持排序、分页和过滤

推荐答案

// www.javascriptcn.com code example
class Table {
  constructor(data, pageSize = 10) {
    this.data = data;
    this.pageSize = pageSize;
    this.currentPage = 1;
    this.sortColumn = null;
    this.sortDirection = 'asc';
    this.filterText = '';
  }

  sort(column) {
    if (this.sortColumn === column) {
      this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
    } else {
      this.sortColumn = column;
      this.sortDirection = 'asc';
    }

    this.data.sort((a, b) => {
      if (a[column] < b[column]) return this.sortDirection === 'asc' ? -1 : 1;
      if (a[column] > b[column]) return this.sortDirection === 'asc' ? 1 : -1;
      return 0;
    });
  }

  filter(text) {
    this.filterText = text.toLowerCase();
    this.currentPage = 1;
  }

  getFilteredData() {
    return this.data.filter(row =>
      Object.values(row).some(value =>
        value.toString().toLowerCase().includes(this.filterText)
      )
    );
  }

  getPaginatedData() {
    const filteredData = this.getFilteredData();
    const startIndex = (this.currentPage - 1) * this.pageSize;
    const endIndex = startIndex + this.pageSize;
    return filteredData.slice(startIndex, endIndex);
  }

  nextPage() {
    const filteredData = this.getFilteredData();
    if (this.currentPage < Math.ceil(filteredData.length / this.pageSize)) {
      this.currentPage++;
    }
  }

  prevPage() {
    if (this.currentPage > 1) {
      this.currentPage--;
    }
  }

  render() {
    const paginatedData = this.getPaginatedData();
    const table = document.createElement('table');
    const thead = document.createElement('thead');
    const tbody = document.createElement('tbody');

    // Render header
    const headerRow = document.createElement('tr');
    Object.keys(this.data[0]).forEach(column => {
      const th = document.createElement('th');
      th.textContent = column;
      th.addEventListener('click', () => this.sort(column));
      headerRow.appendChild(th);
    });
    thead.appendChild(headerRow);
    table.appendChild(thead);

    // Render body
    paginatedData.forEach(row => {
      const tr = document.createElement('tr');
      Object.values(row).forEach(value => {
        const td = document.createElement('td');
        td.textContent = value;
        tr.appendChild(td);
      });
      tbody.appendChild(tr);
    });
    table.appendChild(tbody);

    return table;
  }
}

// Example usage:
const data = [
  { name: 'Alice', age: 25, city: 'New York' },
  { name: 'Bob', age: 30, city: 'San Francisco' },
  { name: 'Charlie', age: 35, city: 'Los Angeles' },
  // Add more data...
];

const table = new Table(data);
document.body.appendChild(table.render());

本题详细解读

1. 组件设计思路

• 数据管理：Table 类接收一个数据数组 data 和每页显示的行数 pageSize，并初始化当前页码、排序列、排序方向和过滤文本。
• 排序功能：sort 方法根据指定的列进行排序，支持升序和降序切换。
• 过滤功能：filter 方法根据输入的文本过滤数据，过滤时忽略大小写。
• 分页功能：getPaginatedData 方法根据当前页码和每页显示的行数返回分页后的数据。
• 渲染功能：render 方法生成表格的 HTML 结构，并将排序、分页和过滤功能与表格交互绑定。

2. 关键方法解析

• sort(column)：根据指定的列进行排序，支持升序和降序切换。排序时使用 Array.prototype.sort 方法，根据列的值进行比较。
• filter(text)：根据输入的文本过滤数据，过滤时忽略大小写。过滤后重置当前页码为第一页。
• getFilteredData()：返回过滤后的数据，使用 Array.prototype.filter 方法对数据进行过滤。
• getPaginatedData()：返回当前页的数据，使用 Array.prototype.slice 方法进行分页。
• render()：生成表格的 HTML 结构，并将排序、分页和过滤功能与表格交互绑定。

3. 使用示例

• 创建一个 Table 实例，传入数据数组和每页显示的行数。
• 调用 render 方法生成表格，并将其添加到页面中。

4. 扩展性

• 可以通过扩展 Table 类来支持更多的功能，如自定义列宽、多列排序、动态列等。
• 可以通过 CSS 样式美化表格的外观，使其更符合实际项目需求。