DataTable的子行中隐藏行（就像Responsive扩展一样）

Question

我正在使用DataTables 1.10+和按钮的列可见性模块（colvis），并希望将隐藏的列放在可折叠的子行中，就像响应式扩展在“详细信息”行中所做的一样。不过我不想要响应式功能。

是否可能仅使用响应式插件的“子行”功能或“关闭”根据窗口宽度自动调整列可见性？

简而言之：

• colvis是必需的，允许用户显示和隐藏列
• 隐藏列应该在可折叠的“子行”中
• 表格不应具有响应式功能（如果使用响应式扩展）

响应式插件的子行：

我的DataTables初始化：

  var oTable = $('#table_sd').DataTable({
    'dom': 'Rrilp<"clear">ti<"clear">lp',
    'processing': true,
    'deferRender': true,
    'Paging': true,
    'pagingType': 'input',
    'displayLength': 25,
    'lengthMenu': [[10, 25, 50, 100, -1], [10, 25, 50, 100, 'Alle']],
    'ordering': true,
    'stateSave': false,
    'responsive': false,
    'columnDefs': [
      {
        'targets': [ 1, 2 ],
        'orderable': false,
        'searchable': false
      }
    ],
    'buttons': [
      $.extend( true, {}, buttonCommon, {
          'extend': 'print',
          'text': 'Print',
          'exportOptions': {
          }
      }),
      {
        'extend': 'collection',
        'text': '<i class="icon fa fa-share-square-o"></i><span class="label">Export ...</span>',
        'collectionLayout': 'fixed one-column',
        'buttons': [
          $.extend( true, {}, buttonCommon, {
              'extend': 'copy',
              'text': 'Copy'
          }),
          $.extend( true, {}, buttonCommon, {
              'extend': 'excel',
              'text': 'XLSX (Excel)'
          }),
          $.extend( true, {}, buttonCommon, {
              'extend': 'csv',
              'text': 'CSV (Excel)'
          }),
          $.extend( true, {}, buttonCommon, {
            'extend': 'pdf',
            'text': 'PDF A4',
            'orientation': 'landscape',
            'pageSize': 'A4'
          }),
          $.extend( true, {}, buttonCommon, {
            'extend': 'pdf',
            'text': 'PDF A3',
            'orientation': 'landscape',
            'pageSize': 'A3'
          })
        ]
      },
      {
        'extend': 'colvis',
        'text': 'Show / Hide columns ...',
        'columns': ':gt(5)',
        'collectionLayout': 'fixed three-column',
        'prefixButtons': [
          {
            'extend': 'colvisGroup',
            'text': '<strong>All</strong>',
            'show': ':hidden'
          },
          {
            'extend': 'colvisGroup',
            'text': '<strong>Default minimal</strong>',
            'show': ':lt(7)',
            'hide': ':visible:not(:lt(7))'
          }
        ]
      }
    ],
    'colReorder': {
      'realtime': false,
      'fixedColumnsLeft': 6
    }
  });

谢谢

- chimos

---

我在这里做个记录，打算在接下来的几天里解决这个问题。我认为这并不像是一个很难的问题。我很惊讶为什么没有其他人尝试过。 - TylerY86

请注意，Colvis现已停用，并被Buttons的列可见性模块所取代。https://datatables.net/extensions/colvis/ - vitomd

是的，我编辑了问题以使其更加简洁。我正在使用新的1.10+ API。 - chimos

@VladimirM，我宁愿使用内置的按钮和响应式扩展功能（实际上我认为这个问题会更容易解决并且更常见）。如果我找不到方法，我可能会尝试使用JavaScript和CSS实现类似的功能。感谢您的评论。 - chimos

Answer 1

幸运的是，DataTables 1.10具备该功能。

查看DataTables的子行：https://datatables.net/examples/api/row_details.html

- Henz

Answer 2

你可以在 <thead> 中的 <th> 标签上使用属性，就像这样

data-priority="1"

所以你必须有类似这样的东西：

<thead>
     <th data-priority="1">One Column Name</th>
     <th>Anonther Column Name</th>
     <th>Another Column Name</th>
</thead>

数据优先级可以帮助您选择要在Datatables响应式扩展中保留哪些列。将其添加到您的<table>标签中：

class="display nowrap" cellspacing="0" width="100%"

别忘了从datatable中调用responsive.js和css.js ^^

- Antoine Vincent

---

如果我没有犯错，您可以忘记“colvis”按钮，只需保留这个。 - Antoine Vincent

谢谢你的回答，但是 data-priority="1" 是不起作用的，它只是告诉响应式扩展将那些列隐藏在最后，即如果所有列都有 data-priority="1"，当宽度变窄时，它们都会隐藏，从右边开始。最好在所有列中使用类 all，以使它们始终在响应式扩展的视野中可见（请参见 https://datatables.net/extensions/responsive/examples/display-control/classes.html），但是这样 'details' 行就不会被触发，尽管有隐藏的列。所以很遗憾，这不是一个有效的方法。 - chimos