使用DataTables搜索列数不同的隐藏嵌套表格报错解决

方案1：将子表格放入主表的单个跨列单元格 #

把嵌套表格塞进主表的一个单元格，用colspan让这个单元格占满主表所有列，保证主表每一行（包括父行和子行容器）的列数完全一致，DataTables就不会报列数不匹配的错误。

要实现子内容可搜索，得把子表格的文本数据纳入DataTables的搜索索引里，要么提前把子数据放到父行的隐藏单元格，要么自定义搜索逻辑遍历子表格内容。

示例代码 #

HTML结构

<table id="mainTable">
  <thead>
    <tr>
      <th>父级ID</th>
      <th>父级名称</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr class="parent-row">
      <td>1</td>
      <td>父项A</td>
      <td><button class="toggle-btn">展开</button></td>
    </tr>
    <tr class="child-row" style="display:none;">
      <td colspan="3">
        <table class="child-table">
          <thead>
            <tr>
              <th>子级ID</th>
              <th>子级名称</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1-1</td>
              <td>子项A1</td>
            </tr>
            <tr>
              <td>1-2</td>
              <td>子项A2</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

JS逻辑

$(document).ready(function() {
  const table = $('#mainTable').DataTable({
    smart: true
  });

  // 绑定展开/收起事件
  $('#mainTable').on('click', '.toggle-btn', function() {
    const parentRow = $(this).closest('.parent-row');
    const childRow = parentRow.next('.child-row');
    childRow.toggle();
    $(this).text(childRow.is(':visible') ? '收起' : '展开');
  });

  // 自定义搜索，让子表格内容也能被检索到
  $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
    const searchTerm = $('#mainTable_filter input').val().toLowerCase();
    if (!searchTerm) return true;

    // 检查父行数据是否匹配
    const parentMatch = data.some(item => item.toLowerCase().includes(searchTerm));
    if (parentMatch) return true;

    // 检查对应子表格的内容
    const childRow = $(table.row(dataIndex).node()).next('.child-row');
    if (childRow.length) {
      const childText = childRow.find('.child-table').text().toLowerCase();
      if (childText.includes(searchTerm)) return true;
    }

    return false;
  });
});

方案2：用DataTables原生子行扩展（推荐） #

DataTables本身自带子行功能，不用额外嵌套表格，直接用row().child()方法渲染子内容，天然避免列数不匹配问题。搜索功能可以通过把子数据合并到父行的数据源里实现，逻辑更清晰。

示例代码 #

HTML结构

<table id="mainTable">
  <thead>
    <tr>
      <th>父级ID</th>
      <th>父级名称</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <!-- 父行由DataTables自动渲染 -->
  </tbody>
</table>

JS逻辑

$(document).ready(function() {
  const table = $('#mainTable').DataTable({
    data: [
      {
        id: "1",
        name: "父项A",
        children: [
          {id: "1-1", name: "子项A1"},
          {id: "1-2", name: "子项A2"}
        ]
      },
      {
        id: "2",
        name: "父项B",
        children: [
          {id: "2-1", name: "子项B1"}
        ]
      }
    ],
    columns: [
      {data: "id"},
      {data: "name"},
      {defaultContent: "<button class='toggle-btn'>展开</button>"}
    ],
    rowCallback: function(row, data) {
      $(row).find('.toggle-btn').on('click', function() {
        const tr = $(row).closest('tr');
        const dtRow = table.row(tr);

        if (dtRow.child.isShown()) {
          // 收起子行
          dtRow.child.hide();
          $(this).text('展开');
        } else {
          // 渲染子行内容
          let childHtml = `
            <table style="width:100%;">
              <thead>
                <tr><th>子级ID</th><th>子级名称</th></tr>
              </thead>
              <tbody>
          `;
          data.children.forEach(child => {
            childHtml += `<tr><td>${child.id}</td><td>${child.name}</td></tr>`;
          });
          childHtml += '</tbody></table>';
          dtRow.child(childHtml).show();
          $(this).text('收起');
        }
      });
    }
  });

  // 扩展搜索逻辑，包含子数据
  $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
    const searchTerm = $('#mainTable_filter input').val().toLowerCase();
    if (!searchTerm) return true;

    const rowData = table.row(dataIndex).data();
    // 检查父数据
    if (rowData.id.toLowerCase().includes(searchTerm) || rowData.name.toLowerCase().includes(searchTerm)) {
      return true;
    }
    // 检查子数据
    for (const child of rowData.children) {
      if (child.id.toLowerCase().includes(searchTerm) || child.name.toLowerCase().includes(searchTerm)) {
        return true;
      }
    }
    return false;
  });
});

方案3：强制统一主表和子表格列数 #

如果非要保留嵌套表格结构，就把子表格的列数改成和主表完全一致，多余的列用空单元格填充或者隐藏。比如主表有3列，子表格也做3列，其中一列放原内容，另外两列留空。不过这种方式比较生硬，不推荐。

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