Отзывчивое расширение - скрыть все столбцы, но первый

Question

Я использую самую последнюю версию данных JQuery DataTables с адаптивным расширением.

Все работает нормально для планшетов или настольных компьютеров, но если экран падает ниже, скажите 600px. У меня есть 4 столбца, когда отзывчивые пинки в нем скрывают только 1 столбец в некоторых планшетах, но некоторые мобильные телефоны скрывают только 2 столбца, оставляя меня с двумя столбцами на дисплее.

Я хочу скрыть последние 3 столбца и оставить только первый столбец, только если это возможно, когда экран или мобильный телефон опустится ниже 600px.

Я читал документацию DataTables, но я не мог найти ничего для скрытия, когда экран опускается ниже ширины X.

$('#teamTable').DataTable({ 
    iDisplayLength: 50, 
    columns: [ 
     {width: '220px' }, 
     null, 
     null 
    ], 
    responsive: { 
     details: { 
      type: 'column' 
     } 
    }, 
    "aoColumnDefs": [ 
     { 'bSortable': false, 'aTargets': [ 0,0 ] } 
    ], 

    oLanguage: { 
     oPaginate: { 
      sNext: "Next Play", 
      sPrevious: "Prv. Play" 
     }, 
     sInfo: "_TOTAL_ plays, showing (_START_ of _END_)", 
     sSearchPlaceholder: "Linker...", 
     sSearch: '' 
    } 
}); 

Я знаю, что использую имена опций из предыдущей версии DataTables, но они все еще работают.

Итак, как я могу скрыть все, кроме одного столбца, когда экран опускается ниже X, я могу сделать это с помощью CSS, но идея состоит в том, чтобы иметь возможность использовать jQuery DataTable.

Answer 1

РЕШЕНИЕ

Вы можете использовать responsive.breakpoints вместе с columns.className управлять видимостью некоторых столбцов для определенной ширины браузера. См. Class logic для получения дополнительной информации.

Чтобы свернуть все столбцы, кроме первого в таблице с четырьмя столбцами, когда ширина браузера составляет 600 пикселей или более, используйте следующий код. Я опустил код для простоты:

$('#example').DataTable({ 
    responsive: { 
     breakpoints: [ 
      { name: 'screen-xs', width: 600 } 
     ] 
    }, 

    columnDefs: [ 
     { className: 'screen-xs': targets: [1,2,3] } 
    ] 
}); 

Answer 2

Вы можете добавить контроль класса определенных столбцов для того, чтобы указать, какие столбцы должны отображаться на экранах с разрешением ceratin. Либо атрибутом class для заголовка таблицы (https://datatables.net/extensions/responsive/examples/column-control/classes.html) или с помощью columns.className опции (https://datatables.net/extensions/responsive/examples/column-control/init-classes.html)

В вашем случае, вероятно, может выглядеть следующим образом:

$('#teamTable').DataTable({ 
    iDisplayLength: 50, 
    columns: [ 
     {width: '220px', className: 'all'}, 
     null, 
     null 
    ], 
    // here comes the rest ... 
});