如何让响应式数据表默认展开

Question

这是我用于数据表的脚本。基本上，在移动设备或更小的屏幕上，默认情况下隐藏每行子项（即列），并使用 +、- 按钮展开并查看它们。我可以切换它以展开和隐藏每一行的功能。我想保留此功能并使所有行默认展开而不隐藏。

<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>


 $(document).ready(function () {
$('#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>'
    }
  }
}).colums.adjust().responsive.recalc();

});

Answer 1

模拟点击按钮解决了我默认展开按钮的问题。

$(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>'
        }
    }
});

table.rows().every(function () {
    $(this.node()).find('td:first-child').trigger('click');
});

table.columns.adjust().responsive.recalc();

});