Question

我正在使用DataTables 1.10+和Buttons＆＃39;列可见性模块（colvis）并且希望在可折叠子行中具有隐藏列，与响应扩展在＆＃39;详细信息中所做的相同。行。我不想要响应度。

是否可以仅使用该子行＆＃39;响应插件的功能或关闭＆＃34;关闭＆＃34;响应度基于窗口宽度的自动列可见性调整？

简而言之：

colvis是允许用户显示和隐藏列
隐藏的列应位于可折叠的子行＆＃39;
该表不应具有响应性（如果使用响应式扩展）

响应式插件子行：

我的DataTables init：

  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
    }
  });

由于

Answer 1

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

参见DataTables＆＃39;儿童行： https://datatables.net/examples/api/row_details.html

Answer 2

为此，您可以使用VLOOKUP中<th>标记的属性喜欢这个

<thead>

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

data-priority="1"

数据优先级可以帮助您选择要与数据表的响应式扩展保留的列。并将其添加到您的<thead> <th data-priority="1">One Column Name</th> <th>Anonther Column Name</th> <th>Another Column Name</th> </thead>代码：

<table>

并且不要忘记从datatable ^^

调用responsive.js和css.js

DataTable在子行中的隐藏行（如响应式扩展一样）

2 个答案: