Angular Material Data Table 捕获排序事件实现服务端排序的方法

以下是不同开发场景下的实现方式，均可直接获取排序字段与升降序参数：

原生JS（无框架/自研表格场景） #

采用事件委托实现，性能开销更低，无需逐个绑定列头事件：

• 列头DOM提前通过data-*自定义属性挂载对应后端排序字段，示例：<th data-sort-field="user_id">用户ID</th>
• 给表格根容器绑定点击事件，通过事件冒泡捕获列头点击动作
• 点击时切换当前列排序状态，同时清空其他列的排序标识

示例代码：

// 绑定到表格根容器
document.querySelector('#dataTable').addEventListener('click', (e) => {
  // 匹配被点击的可排序列头
  const sortTh = e.target.closest('th[data-sort-field]')
  if (!sortTh) return

  // 取当前列对应的后端字段
  const sortField = sortTh.dataset.sortField
  // 切换排序方向：未排序/降序状态点击后切为升序，升序点击后切为降序
  const currentOrder = sortTh.dataset.sortOrder || ''
  const newOrder = currentOrder === 'ASC' ? 'DESC' : 'ASC'

  // 更新DOM上的排序状态
  sortTh.dataset.sortOrder = newOrder
  // 清空其他列的排序状态
  document.querySelectorAll('th[data-sort-field]').forEach(item => {
    if (item !== sortTh) item.dataset.sortOrder = ''
  })

  // 此处直接携带参数调用后端列表接口即可
  console.log('排序参数', { sortField, sortOrder: newOrder })
})

Vue生态常用组件库实现 #

Element UI Table #

直接使用组件内置的sort-change事件，无需额外绑定：

<template>
  <el-table
    :data="tableData"
    @sort-change="handleSort"
  >
    <!-- 需支持服务端排序的列设置sortable="custom"，prop对应后端排序字段 -->
    <el-table-column prop="user_id" label="用户ID" sortable="custom" />
    <el-table-column prop="user_name" label="用户名" sortable="custom" />
  </el-table>
</template>
<script>
export default {
  methods: {
    handleSort({ prop, order }) {
      // order返回值说明：ascending=升序ASC，descending=降序DESC，null=取消排序
      const sortOrder = order === 'ascending' ? 'ASC' : order === 'descending' ? 'DESC' : ''
      const sortField = prop
      // 调用后端接口
      this.fetchList(sortField, sortOrder)
    }
  }
}
</script>

Ant Design Vue Table #

使用组件内置的change事件，分页、筛选、排序触发均会回调，取排序参数即可：

<template>
  <a-table
    :columns="columns"
    :data-source="tableData"
    @change="handleTableChange"
  />
</template>
<script>
export default {
  data() {
    return {
      columns: [
        // 开启排序的列配置sorter: true，dataIndex对应后端排序字段
        { title: '用户ID', dataIndex: 'user_id', sorter: true },
        { title: '用户名', dataIndex: 'user_name', sorter: true }
      ]
    }
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      // sorter.order返回值说明：ascend=升序ASC，descend=降序DESC
      const sortField = sorter.field
      const sortOrder = sorter.order === 'ascend' ? 'ASC' : 'DESC'
      // 调用后端接口
      this.fetchList(sortField, sortOrder)
    }
  }
}
</script>

React生态Ant Design Table实现 #

和Vue版逻辑一致，使用onChange事件获取排序参数：

import { Table } from 'antd'

const ServerSortTable = () => {
  const columns = [
    { title: '用户ID', dataIndex: 'user_id', sorter: true },
    { title: '用户名', dataIndex: 'user_name', sorter: true }
  ]

  const handleTableChange = (pagination, filters, sorter) => {
    const sortField = sorter.field
    const sortOrder = sorter.order === 'ascend' ? 'ASC' : 'DESC'
    // 调用后端接口
    fetchTableList(sortField, sortOrder)
  }

  return <Table columns={columns} dataSource={[]} onChange={handleTableChange} />
}

内容的提问来源于stack exchange，提问作者michel martin