Скрытые строки DataTable в дочерней строке (например, ответное расширение)

Question

Я использую DataTables 1.10+ с модулем видимости столбцов кнопок (colvis) и хотел бы иметь скрытые столбцы в сворачиваемой дочерней строке, так же, как и для адаптивного расширения в строке "details". Однако я не хочу реагирования.

Возможно ли использовать только функциональные возможности «дочернего ряда» адаптивного плагина или «отключить» автоматическую коррекцию видимости столбцов на основе ширины окна?

Короче:

• colvis необходимо, чтобы позволить пользователю показать и скрыть столбцы
• Скрытые столбцы должны быть в collapible «ребенка-строки»
• В таблице не должно быть отзывчивым (в случае использования Адаптивный расширение)

Адаптивный плагин ребенка ряд:

Мои 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' Дитя Ряды:https://datatables.net/examples/api/row_details.html

Answer 2

Для этого вы можете использовать атрибут вашего <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> 

Приоритет данных может помочь вам выбрать, какие столбцы вы хотите сохранить с гибкими расширениями Datatables. И добавить к вашей <table> тегу:

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

и не забудьте назвать responsive.js и css.js из DataTable ^^