如何实现带排序功能的jQuery嵌套DataTable

你的问题出在子表格只是静态HTML，没有被初始化DataTable实例，所以默认的排序功能没有启用。下面是具体的修改方案：

核心思路 #

不要直接把完整的表格HTML字符串塞到主表格单元格里，而是先预留容器，再对每个子容器单独初始化DataTable，这样才能激活排序等DataTable功能。

代码修改步骤 #

1. 修改主表格单元格的赋值逻辑 #

不再直接插入表格HTML，而是添加一个唯一标识的容器，方便后续初始化子表格：

// 假设rowId是当前主表格行的唯一ID，避免容器ID重复
dtRow[8] = '<div class="child-table-container" id="child-table-' + rowId + '"></div>';

2. 重写子表格HTML生成函数 #

去掉不必要的转义字符（直接插入DOM不需要转义实体），并修正原代码中多余的fourthTd错误：

function createChildTableHtml() {
  const tableHeader = '<thead class="thead-light"><tr><th>Age</th><th>Location</th><th>nationality</th></tr></thead>';
  let tableRows = '';
  
  // 添加第一行数据
  tableRows += '<tr><td>32</td><td>USA</td><td>American</td></tr>';
  // 添加第二行数据
  tableRows += '<tr><td>33</td><td>UK</td><td>British</td></tr>';
  
  return `<table class="table table-bordered">${tableHeader}<tbody>${tableRows}</tbody></table>`;
}

3. 在主DataTable初始化后，批量初始化子表格 #

利用主表格的drawCallback钩子，确保每次主表格渲染完成后，子表格都被正确初始化：

// 初始化主DataTable
const mainTable = $('#main-table').DataTable({
  // 你的主表格配置（列定义、数据源等）
  columns: [...],
  drawCallback: function() {
    // 遍历所有子表格容器，初始化DataTable
    $('.child-table-container').each(function() {
      const $container = $(this);
      // 避免重复初始化
      if (!$container.data('dt-initialized')) {
        // 插入子表格HTML
        $container.html(createChildTableHtml());
        // 初始化子DataTable，启用排序（ordering默认是true，可明确设置）
        $container.find('table').DataTable({
          ordering: true,
          // 可添加其他配置：比如禁用分页、搜索等，根据需求调整
          paging: false,
          searching: false
        });
        // 标记已初始化
        $container.data('dt-initialized', true);
      }
    });
  }
});

关键说明 #

• 每个子表格必须单独调用DataTable()初始化，才能激活排序、筛选等内置功能；
• 使用drawCallback是为了处理主表格分页、排序后重新渲染的场景，确保子表格不会丢失；
• 给容器添加dt-initialized标记，避免重复初始化导致的性能问题或错误。

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