DataTables响应式子行功能失效求助：无展开/折叠图标

我帮你排查了代码，发现核心问题出在配置项的错误设置上，咱们一步步来修正：

1. 修正responsive.details.target的配置 #

你现在把这个参数设成了'tr'，但这个选项是用来指定哪一列作为展开/收起子行的触发按钮的。你已经在columnDefs里给第0列加了control类（这是DataTables用来识别触发列的特殊类），所以这里应该把target改成0（对应第0列的索引）：

responsive: {
  details: {
    type: 'column',
    target: 0 // 改成列索引0，对应带control类的空列
  }
},

设置成'tr'的话，DataTables找不到正确的触发元素，就会直接放弃子行展开逻辑，把所有列都平铺显示出来，这就是你看到的问题。

2. 确保tbody的对应列结构正确 #

你的thead里第0列是空的，那tbody里每一行的第0列也得是空单元格，这样DataTables才能自动在这个位置插入+/-展开按钮，比如：

<tbody>
  <tr>
    <td></td> <!-- 这个空列会被自动填充展开按钮 -->
    <td>Tiger</td>
    <td>Nixon</td>
    <td>System Architect</td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
    <td>5421</td>
  </tr>
  <!-- 其他行同理 -->
</tbody>

3. 版本兼容性检查（可选） #

你用的DataTables 1.10.16和Responsive 2.2.1是兼容的，不过如果后续还有奇怪问题，可以考虑升级到匹配的新版本，但当前的问题主要还是配置错误导致的。

修正后的完整初始化代码 #

$(document).ready(function() {
  $('#example').DataTable( {
    responsive: {
      details: {
        type: 'column',
        target: 0 // 修正为列索引0
      }
    },
    columnDefs: [
      { className: 'control', orderable: false, targets: 0 }
    ],
    order: [ 1, 'asc' ]
  } );
} );

这样修改后，第0列就会正常显示展开按钮，点击就能查看子行里的隐藏列内容，不会再把所有列都直接显示在主表格里了。

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