程序猿指南
Search K

Appearance

CSS3管理后台数据表格2024：前端开发者表格设计完整指南 ​

📊 SEO元描述：2024年最新CSS3管理后台数据表格设计教程，详解表格样式美化、排序功能样式、分页组件、筛选器设计。包含完整表格组件代码，适合前端开发者快速掌握后台表格开发技能。

核心关键词：CSS3数据表格2024、管理后台表格、表格样式美化、排序功能样式、分页组件

长尾关键词：CSS3数据表格怎么做、后台表格设计方案、表格排序功能实现、分页组件制作、表格筛选器设计

📚 CSS3管理后台数据表格学习目标与核心收获 ​

通过本节CSS3管理后台数据表格设计，你将系统性掌握：

  • ✅ 表格样式美化：掌握现代数据表格的视觉设计和用户体验优化
  • ✅ 排序功能样式：学会实现表格列排序的交互设计和状态显示
  • ✅ 分页组件设计：了解大数据量表格的分页导航和用户体验设计
  • ✅ 筛选器设计：掌握表格数据筛选和搜索功能的界面实现
  • ✅ 响应式表格：学会适配移动端的表格显示和交互方案
  • ✅ 表格性能优化：理解大数据量表格的渲染优化和用户体验提升

🎯 适合人群 ​

  • 前端开发者的后台表格实战指导
  • 后台系统开发者的数据展示技能提升
  • 全栈工程师的表格组件设计参考
  • 产品经理的数据表格用户体验理解

🌟 数据表格设计是什么？为什么表格如此重要？ ​

数据表格设计是什么？这是管理后台的核心组件。数据表格是用于展示、管理和操作结构化数据的界面组件，承载着数据查看、编辑、筛选、排序等核心功能，也是企业数据管理的重要工具。

数据表格的核心价值 ​

  • 🎯 提升数据可读性：清晰的表格设计让大量数据易于理解和查找
  • 🔧 增强操作效率：便捷的排序、筛选功能提升数据处理效率
  • 💡 优化用户体验：响应式设计和交互反馈改善使用体验
  • 📚 支持数据分析：表格是数据分析和决策的重要基础
  • 🚀 提升工作效率：高效的表格操作减少管理员的工作负担

💡 表格设计原则：遵循"信息密度适中"原则，既要展示足够的信息，又要保持良好的可读性和操作性

表格样式美化：构建现代化的数据展示界面 ​

现代数据表格需要在功能性和美观性之间找到平衡，提供清晰的数据展示和良好的用户体验。

现代数据表格实现 ​

html
<!-- 🎉 管理后台数据表格结构 -->
<div class="data-table-container">
  <!-- 表格工具栏 -->
  <div class="table-toolbar">
    <div class="toolbar-left">
      <h3 class="table-title">用户管理</h3>
      <div class="table-actions">
        <button class="btn btn-primary">
          <span class="btn-icon">➕</span>
          添加用户
        </button>
        <button class="btn btn-secondary">
          <span class="btn-icon">📤</span>
          导出数据
        </button>
        <button class="btn btn-danger" disabled>
          <span class="btn-icon">🗑️</span>
          批量删除
        </button>
      </div>
    </div>
    
    <div class="toolbar-right">
      <!-- 表格搜索 -->
      <div class="table-search">
        <input 
          type="search" 
          class="search-input" 
          placeholder="搜索用户名、邮箱..."
          id="tableSearch"
        >
        <button class="search-btn">🔍</button>
      </div>
      
      <!-- 表格筛选 -->
      <div class="table-filters">
        <select class="filter-select" id="statusFilter">
          <option value="">全部状态</option>
          <option value="active">活跃</option>
          <option value="inactive">非活跃</option>
          <option value="banned">已禁用</option>
        </select>
        
        <select class="filter-select" id="roleFilter">
          <option value="">全部角色</option>
          <option value="admin">管理员</option>
          <option value="user">普通用户</option>
          <option value="vip">VIP用户</option>
        </select>
      </div>
      
      <!-- 表格设置 */
      <div class="table-settings">
        <button class="settings-btn" id="tableSettings">⚙️</button>
      </div>
    </div>
  </div>
  
  <!-- 数据表格 -->
  <div class="table-wrapper">
    <table class="data-table" id="dataTable">
      <thead class="table-header">
        <tr>
          <th class="select-column">
            <input type="checkbox" class="select-all" id="selectAll">
          </th>
          <th class="sortable" data-column="id">
            <span class="column-text">ID</span>
            <span class="sort-indicator">
              <span class="sort-asc">▲</span>
              <span class="sort-desc">▼</span>
            </span>
          </th>
          <th class="sortable" data-column="avatar">
            <span class="column-text">头像</span>
          </th>
          <th class="sortable" data-column="name">
            <span class="column-text">用户名</span>
            <span class="sort-indicator">
              <span class="sort-asc">▲</span>
              <span class="sort-desc">▼</span>
            </span>
          </th>
          <th class="sortable" data-column="email">
            <span class="column-text">邮箱</span>
            <span class="sort-indicator">
              <span class="sort-asc">▲</span>
              <span class="sort-desc">▼</span>
            </span>
          </th>
          <th class="sortable" data-column="role">
            <span class="column-text">角色</span>
            <span class="sort-indicator">
              <span class="sort-asc">▲</span>
              <span class="sort-desc">▼</span>
            </span>
          </th>
          <th class="sortable" data-column="status">
            <span class="column-text">状态</span>
            <span class="sort-indicator">
              <span class="sort-asc">▲</span>
              <span class="sort-desc">▼</span>
            </span>
          </th>
          <th class="sortable" data-column="created_at">
            <span class="column-text">注册时间</span>
            <span class="sort-indicator">
              <span class="sort-asc">▲</span>
              <span class="sort-desc">▼</span>
            </span>
          </th>
          <th class="actions-column">操作</th>
        </tr>
      </thead>
      
      <tbody class="table-body">
        <tr class="table-row" data-id="1">
          <td class="select-cell">
            <input type="checkbox" class="row-select">
          </td>
          <td class="id-cell">1001</td>
          <td class="avatar-cell">
            <img src="avatar1.jpg" alt="用户头像" class="user-avatar">
          </td>
          <td class="name-cell">
            <div class="user-info">
              <span class="user-name">张三</span>
              <span class="user-tag vip">VIP</span>
            </div>
          </td>
          <td class="email-cell">zhangsan@example.com</td>
          <td class="role-cell">
            <span class="role-badge admin">管理员</span>
          </td>
          <td class="status-cell">
            <span class="status-badge active">活跃</span>
          </td>
          <td class="date-cell">2024-01-15 10:30</td>
          <td class="actions-cell">
            <div class="action-buttons">
              <button class="action-btn edit" title="编辑">✏️</button>
              <button class="action-btn view" title="查看">👁️</button>
              <button class="action-btn delete" title="删除">🗑️</button>
              <button class="action-btn more" title="更多">⋯</button>
            </div>
          </td>
        </tr>
        
        <!-- 更多数据行... -->
      </tbody>
    </table>
    
    <!-- 空状态 -->
    <div class="empty-state" style="display: none;">
      <div class="empty-icon">📋</div>
      <div class="empty-title">暂无数据</div>
      <div class="empty-description">没有找到符合条件的用户</div>
      <button class="btn btn-primary">添加第一个用户</button>
    </div>
    
    <!-- 加载状态 -->
    <div class="loading-state" style="display: none;">
      <div class="loading-spinner"></div>
      <div class="loading-text">正在加载数据...</div>
    </div>
  </div>
  
  <!-- 表格分页 -->
  <div class="table-pagination">
    <div class="pagination-info">
      <span>显示 1-10 条，共 156 条记录</span>
      <select class="page-size-select">
        <option value="10">10条/页</option>
        <option value="20">20条/页</option>
        <option value="50">50条/页</option>
        <option value="100">100条/页</option>
      </select>
    </div>
    
    <div class="pagination-controls">
      <button class="page-btn prev" disabled>上一页</button>
      <div class="page-numbers">
        <button class="page-btn active">1</button>
        <button class="page-btn">2</button>
        <button class="page-btn">3</button>
        <span class="page-ellipsis">...</span>
        <button class="page-btn">16</button>
      </div>
      <button class="page-btn next">下一页</button>
    </div>
  </div>
</div>
css
/* 🎨 数据表格样式设计 */
.data-table-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 表格工具栏 */
.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
  flex-wrap: wrap;
  gap: 1rem;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.table-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.table-actions {
  display: flex;
  gap: 0.75rem;
}

.btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-primary {
  background: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background: var(--primary-dark);
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 搜索和筛选 */
.table-search {
  display: flex;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
}

.search-input {
  padding: 0.75rem 1rem;
  border: none;
  outline: none;
  width: 250px;
  font-size: 0.9rem;
}

.search-btn {
  padding: 0.75rem 1rem;
  background: var(--primary-color);
  color: white;
  border: none;
  cursor: pointer;
}

.table-filters {
  display: flex;
  gap: 0.75rem;
}

.filter-select {
  padding: 0.75rem 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: white;
  font-size: 0.9rem;
  cursor: pointer;
}

.settings-btn {
  width: 40px;
  height: 40px;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 数据表格主体 */
.table-wrapper {
  overflow-x: auto;
  position: relative;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.table-header {
  background: #f8f9fa;
  border-bottom: 2px solid #e0e0e0;
}

.table-header th {
  padding: 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  position: relative;
  user-select: none;
}

.sortable {
  cursor: pointer;
  transition: background 0.3s ease;
}

.sortable:hover {
  background: rgba(0, 0, 0, 0.05);
}

.column-text {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.sort-indicator {
  display: inline-flex;
  flex-direction: column;
  margin-left: 0.5rem;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.sortable:hover .sort-indicator,
.sortable.sorted .sort-indicator {
  opacity: 1;
}

.sort-asc,
.sort-desc {
  font-size: 0.7rem;
  line-height: 1;
  color: var(--text-muted);
}

.sortable.sorted-asc .sort-asc,
.sortable.sorted-desc .sort-desc {
  color: var(--primary-color);
}

/* 表格行样式 */
.table-row {
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.3s ease;
}

.table-row:hover {
  background: #f8f9fa;
}

.table-row.selected {
  background: rgba(44, 90, 160, 0.1);
}

.table-body td {
  padding: 1rem;
  vertical-align: middle;
}

/* 特殊列样式 */
.select-column,
.select-cell {
  width: 50px;
  text-align: center;
}

.avatar-cell {
  width: 60px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-tag {
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
}

.user-tag.vip {
  background: #ffd700;
  color: #8b6914;
}

/* 状态和角色标签 */
.role-badge,
.status-badge {
  padding: 0.4rem 0.8rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.role-badge.admin {
  background: #e3f2fd;
  color: #1976d2;
}

.role-badge.user {
  background: #f3e5f5;
  color: #7b1fa2;
}

.status-badge.active {
  background: #e8f5e8;
  color: #2e7d32;
}

.status-badge.inactive {
  background: #fff3e0;
  color: #f57c00;
}

.status-badge.banned {
  background: #ffebee;
  color: #d32f2f;
}

/* 操作按钮 */
.actions-cell {
  width: 120px;
}

.action-buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.action-btn {
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  font-size: 0.9rem;
}

.action-btn:hover {
  background: #f8f9fa;
  border-color: var(--primary-color);
}

.action-btn.edit:hover {
  background: #e3f2fd;
  color: #1976d2;
}

.action-btn.delete:hover {
  background: #ffebee;
  color: #d32f2f;
}

分页组件：处理大数据量的用户体验 ​

分页组件是数据表格的重要组成部分，需要提供清晰的导航和灵活的配置选项。

分页组件实现 ​

css
/* 🎉 表格分页样式 */
.table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
  flex-wrap: wrap;
  gap: 1rem;
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.page-size-select {
  padding: 0.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: white;
  font-size: 0.9rem;
}

.pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 0.75rem;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-btn:hover:not(:disabled) {
  background: #f8f9fa;
  border-color: var(--primary-color);
}

.page-btn.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.page-ellipsis {
  padding: 0 0.5rem;
  color: var(--text-muted);
}

/* 空状态和加载状态 */
.empty-state,
.loading-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--text-muted);
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.empty-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.empty-description {
  margin-bottom: 2rem;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 1rem;
  color: var(--text-secondary);
}

数据表格的关键特性：

  • 🎯 清晰的信息层次：通过颜色、字体、间距区分不同类型的信息
  • 🎯 丰富的交互反馈：悬停效果、选中状态、排序指示器等
  • 🎯 灵活的功能配置：搜索、筛选、排序、分页等功能模块化

💼 表格性能提示：对于大数据量表格，建议使用虚拟滚动技术，只渲染可见区域的数据行，提升渲染性能

📚 CSS3管理后台数据表格学习总结与下一步规划 ​

✅ 本节核心收获回顾 ​

通过本节CSS3管理后台数据表格设计的学习，你已经掌握：

  1. 表格样式美化：掌握了现代数据表格的完整视觉设计和用户体验优化
  2. 排序功能样式：学会了实现表格列排序的交互设计和状态显示
  3. 分页组件设计：了解了大数据量表格的分页导航和用户体验设计
  4. 筛选器设计：掌握了表格数据筛选和搜索功能的界面实现
  5. 响应式表格：学会了适配移动端的表格显示和交互方案

🎯 数据表格下一步 ​

  1. 表单组件开发：学习后台系统中各种表单控件的设计和实现
  2. 数据可视化：掌握图表组件的设计和数据展示技巧
  3. 高级表格功能：实现表格编辑、拖拽排序、列宽调整等高级功能
  4. 性能优化：学习虚拟滚动和大数据量表格的优化技术

🔗 相关学习资源 ​

  • 表格设计规范：Material Design Tables - 表格设计最佳实践
  • 数据表格库：AG-Grid、DataTables - 专业的表格组件库
  • 虚拟滚动技术：React Window、Vue Virtual Scroller - 性能优化方案
  • 无障碍设计：WCAG Tables - 表格无障碍访问指南

💪 数据表格实战建议 ​

  1. 用户体验测试：观察用户使用表格的行为模式，优化交互设计
  2. 性能监控：监控大数据量表格的渲染性能和用户体验
  3. 功能迭代：根据业务需求逐步完善表格功能
  4. 跨浏览器测试：确保表格在不同浏览器中的兼容性

🔍 常见问题FAQ ​

Q1: 如何优化大数据量表格的性能？ ​

A: 使用虚拟滚动只渲染可见行、分页加载数据、避免复杂的CSS选择器、使用CSS transform优化动画性能。

Q2: 表格在移动端如何适配？ ​

A: 使用响应式设计隐藏次要列、实现横向滚动、提供卡片式布局替代方案、优化触摸交互体验。

Q3: 如何实现表格的排序功能？ ​

A: 前端实现排序UI状态管理，后端提供排序API，通过URL参数传递排序字段和方向，更新表格数据显示。

Q4: 表格的筛选功能如何设计？ ​

A: 提供多种筛选方式(下拉选择、日期范围、搜索框)，实时或延迟筛选，显示筛选条件和结果数量，支持筛选条件的保存和重置。

Q5: 如何处理表格的空状态和错误状态？ ​

A: 设计友好的空状态页面引导用户操作，提供明确的错误信息和解决方案，使用加载状态提升用户体验。

🛠️ 表格交互功能实现 ​

表格排序和筛选 ​

javascript
// 🎉 数据表格交互控制
class DataTable {
  constructor(tableId) {
    this.table = document.getElementById(tableId);
    this.currentSort = { column: null, direction: null };
    this.filters = {};
    this.selectedRows = new Set();
    
    this.init();
  }
  
  init() {
    this.bindSortEvents();
    this.bindFilterEvents();
    this.bindSelectionEvents();
    this.bindPaginationEvents();
  }
  
  bindSortEvents() {
    const sortableHeaders = this.table.querySelectorAll('.sortable');
    sortableHeaders.forEach(header => {
      header.addEventListener('click', () => {
        const column = header.dataset.column;
        this.handleSort(column, header);
      });
    });
  }
  
  handleSort(column, headerElement) {
    // 清除其他列的排序状态
    this.table.querySelectorAll('.sortable').forEach(th => {
      th.classList.remove('sorted-asc', 'sorted-desc');
    });
    
    // 确定排序方向
    let direction = 'asc';
    if (this.currentSort.column === column) {
      direction = this.currentSort.direction === 'asc' ? 'desc' : 'asc';
    }
    
    // 更新排序状态
    this.currentSort = { column, direction };
    headerElement.classList.add(`sorted-${direction}`);
    
    // 执行排序
    this.sortTable(column, direction);
  }
  
  sortTable(column, direction) {
    // 这里通常会调用API重新获取排序后的数据
    console.log(`Sorting by ${column} ${direction}`);
    
    // 模拟API调用
    this.showLoading();
    setTimeout(() => {
      this.hideLoading();
      // 更新表格数据
    }, 500);
  }
  
  bindFilterEvents() {
    const searchInput = document.getElementById('tableSearch');
    const statusFilter = document.getElementById('statusFilter');
    const roleFilter = document.getElementById('roleFilter');
    
    // 搜索防抖
    let searchTimeout;
    searchInput.addEventListener('input', (e) => {
      clearTimeout(searchTimeout);
      searchTimeout = setTimeout(() => {
        this.handleFilter('search', e.target.value);
      }, 300);
    });
    
    statusFilter.addEventListener('change', (e) => {
      this.handleFilter('status', e.target.value);
    });
    
    roleFilter.addEventListener('change', (e) => {
      this.handleFilter('role', e.target.value);
    });
  }
  
  handleFilter(type, value) {
    this.filters[type] = value;
    this.applyFilters();
  }
  
  applyFilters() {
    console.log('Applying filters:', this.filters);
    
    // 调用API获取筛选后的数据
    this.showLoading();
    setTimeout(() => {
      this.hideLoading();
      // 更新表格数据
    }, 500);
  }
  
  bindSelectionEvents() {
    const selectAll = document.getElementById('selectAll');
    const rowSelects = this.table.querySelectorAll('.row-select');
    
    selectAll.addEventListener('change', (e) => {
      this.handleSelectAll(e.target.checked);
    });
    
    rowSelects.forEach(checkbox => {
      checkbox.addEventListener('change', (e) => {
        const rowId = e.target.closest('.table-row').dataset.id;
        this.handleRowSelect(rowId, e.target.checked);
      });
    });
  }
  
  handleSelectAll(checked) {
    const rowSelects = this.table.querySelectorAll('.row-select');
    rowSelects.forEach(checkbox => {
      checkbox.checked = checked;
      const rowId = checkbox.closest('.table-row').dataset.id;
      if (checked) {
        this.selectedRows.add(rowId);
      } else {
        this.selectedRows.delete(rowId);
      }
    });
    
    this.updateBatchActions();
  }
  
  handleRowSelect(rowId, checked) {
    if (checked) {
      this.selectedRows.add(rowId);
    } else {
      this.selectedRows.delete(rowId);
    }
    
    // 更新全选状态
    const selectAll = document.getElementById('selectAll');
    const totalRows = this.table.querySelectorAll('.row-select').length;
    selectAll.checked = this.selectedRows.size === totalRows;
    selectAll.indeterminate = this.selectedRows.size > 0 && this.selectedRows.size < totalRows;
    
    this.updateBatchActions();
  }
  
  updateBatchActions() {
    const batchDeleteBtn = document.querySelector('.btn-danger');
    batchDeleteBtn.disabled = this.selectedRows.size === 0;
    batchDeleteBtn.textContent = `批量删除 (${this.selectedRows.size})`;
  }
  
  showLoading() {
    document.querySelector('.loading-state').style.display = 'block';
    document.querySelector('.table-body').style.opacity = '0.5';
  }
  
  hideLoading() {
    document.querySelector('.loading-state').style.display = 'none';
    document.querySelector('.table-body').style.opacity = '1';
  }
}

// 分页控制器
class TablePagination {
  constructor(containerId) {
    this.container = document.querySelector(containerId);
    this.currentPage = 1;
    this.pageSize = 10;
    this.totalItems = 0;
    
    this.init();
  }
  
  init() {
    this.bindEvents();
  }
  
  bindEvents() {
    // 页码按钮
    this.container.addEventListener('click', (e) => {
      if (e.target.classList.contains('page-btn') && !e.target.disabled) {
        const page = parseInt(e.target.textContent);
        if (!isNaN(page)) {
          this.goToPage(page);
        } else if (e.target.classList.contains('prev')) {
          this.goToPage(this.currentPage - 1);
        } else if (e.target.classList.contains('next')) {
          this.goToPage(this.currentPage + 1);
        }
      }
    });
    
    // 页面大小选择
    const pageSizeSelect = document.querySelector('.page-size-select');
    pageSizeSelect.addEventListener('change', (e) => {
      this.pageSize = parseInt(e.target.value);
      this.goToPage(1);
    });
  }
  
  goToPage(page) {
    this.currentPage = page;
    this.updatePagination();
    
    // 触发数据加载
    this.onPageChange(page, this.pageSize);
  }
  
  updatePagination() {
    // 更新页码按钮状态
    const pageButtons = this.container.querySelectorAll('.page-btn');
    pageButtons.forEach(btn => {
      btn.classList.remove('active');
      if (parseInt(btn.textContent) === this.currentPage) {
        btn.classList.add('active');
      }
    });
    
    // 更新上一页/下一页按钮状态
    const prevBtn = this.container.querySelector('.prev');
    const nextBtn = this.container.querySelector('.next');
    prevBtn.disabled = this.currentPage === 1;
    nextBtn.disabled = this.currentPage === this.getTotalPages();
  }
  
  getTotalPages() {
    return Math.ceil(this.totalItems / this.pageSize);
  }
  
  onPageChange(page, pageSize) {
    console.log(`Loading page ${page} with ${pageSize} items per page`);
    // 这里调用API加载数据
  }
}

// 初始化表格
document.addEventListener('DOMContentLoaded', () => {
  new DataTable('dataTable');
  new TablePagination('.table-pagination');
});

"数据表格是管理后台的核心组件。掌握了表格样式设计、排序筛选和分页功能，你就能够构建出高效且用户友好的数据管理界面。接下来让我们学习表单组件的设计，这是数据录入和编辑的重要工具！"