DataTable在子行中的隱藏行（如響應式擴展名）

Question

我使用DataTables 1.10+和Buttons的列可見性模塊（colvis），並希望在可摺疊的子行中使用隱藏列，採用相同的方式響應擴展在'詳細信息'行中。儘管我不想要責任感。

是否可以僅使用響應式插件的'child-row'功能或根據窗口寬度「關閉」響應度自動列可見性調整？

簡而言之：

• colvis需要允許用戶顯示和隱藏列
• 隱藏的列應在collapible「孩子行」
• 表不應該響應（使用響應 擴展）

響應插件子行的情況：

個

我的數據表初始化：

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

致電responsive.js和css.js幸運的是，數據表1.10具有該功能。

見數據表子行：https://datatables.net/examples/api/row_details.html

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

，不要忘了，從數據表^^