如何让响应式DataTables默认展开所有行

当前使用DataTables的responsive插件时，移动端/小屏幕下每行的子列默认隐藏，需改为默认展开状态，同时保留±按钮的切换功能，可通过以下修改实现：

修正后的完整代码 #

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css">
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>

<script>
$(document).ready(function () {
  var table = $('#table_id').DataTable({
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
    "pageLength": 10,
    "info": false,
    "autoWidth": false,
    "responsive": true,
    language: {
      'paginate': {
        'previous': '<span class="prev-icon"><i class="bi bi-chevron-left"></i></span>',
        'next': '<span class="next-icon"><i class="bi bi-chevron-right"></i></span>'
      }
    }
  }).columns.adjust().responsive.recalc();

  // 遍历所有行，默认展开子列并更新按钮状态
  table.rows().every(function () {
    this.child.show();
    $(this.node()).addClass('dtr-expanded');
  });
});
</script>

关键修改说明 #

1. 修正拼写错误：原代码中.colums.adjust()是笔误，改为正确的.columns.adjust()
2. 默认展开逻辑：
   • 通过table.rows().every()遍历表格所有行
   • 调用row().child.show()强制展开子列
   • 给行节点添加dtr-expanded类，让切换按钮从"+"变为"-"，保持交互状态与实际展开情况一致

修改后，移动端小屏幕下所有行的子列会默认展开，同时保留±按钮的切换功能，点击可收起/再次展开子列。

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