Datatables.net排序信息获取：如何在标签中展示排序方向与列名

可以通过Datatables内置API直接获取排序配置与列信息，实现需求的具体步骤如下：

1. 核心API说明 #

• table.order()：返回当前表格的排序配置数组，每个元素格式为[列索引, 排序方向]（排序方向取值为asc或desc）
• table.columns(列索引).header()：获取指定列的表头DOM元素，通过textContent可提取列名

2. 单列排序场景实现 #

先初始化Datatable，再编写标签更新函数并绑定排序事件：

// 初始化Datatable实例
const table = $('#your-table-id').DataTable({
  // 你的表格配置项
  columns: [
    { title: 'Name' },
    { title: 'Age' },
    { title: 'Email' }
  ]
});

// 更新排序标签的函数
function updateSortLabel() {
  const currentSort = table.order()[0];
  if (!currentSort) {
    $('#sort-display-label').text('No sorting applied');
    return;
  }

  const colIndex = currentSort[0];
  const sortDir = currentSort[1];
  const colName = table.columns(colIndex).header().textContent.trim();
  const dirText = sortDir === 'asc' ? 'Ascending' : 'Descending';

  $('#sort-display-label').text(`${dirText} ${colName}`);
}

// 初始化完成后首次更新标签
updateSortLabel();

// 监听排序事件，每次用户调整排序后自动更新
table.on('order.dt', updateSortLabel);

3. 多列排序场景适配 #

如果需要支持多列排序的组合展示，只需遍历排序配置数组即可：

function updateSortLabel() {
  const sortConfigs = table.order();
  if (sortConfigs.length === 0) {
    $('#sort-display-label').text('No sorting applied');
    return;
  }

  const sortTexts = sortConfigs.map(config => {
    const colIndex = config[0];
    const sortDir = config[1];
    const colName = table.columns(colIndex).header().textContent.trim();
    const dirText = sortDir === 'asc' ? 'Ascending' : 'Descending';
    return `${dirText} ${colName}`;
  });

  $('#sort-display-label').text(sortTexts.join(', '));
}

额外提示 #

如果列名是通过配置项columns.title设置的，也可以直接通过table.columns(colIndex).data().settings()[0].aoColumns[colIndex].sTitle获取列名，避免DOM文本提取可能的格式问题。

内容的提问来源于stack exchange，提问作者Harshit Verma