Изменить количество столбцов, отображаемых при визуализации с помощью Datatables

Question

Я создаю таблицу данных с DataTables .

$('table').DataTable( {
    dom: 'Bfrtip',
    buttons: [
        'copy', 'excel', 'print',
    ],
    responsive: true
}

В моей таблице 11 столбцов.

Я хочу показать 5 столбцов и при нажатии на кнопку + показать другие 6 столбцов.

Как я могу это сделать?

Answer 1

Я думаю, что этот способ хорош для вас.

Добавьте этот код в ваши таблицы данных. css:

table.dataTable th, table.dataTable td {
  padding-right: 25px !important;
  white-space: nowrap;
}

Answer 2

https://datatables.net/examples/basic_init/hidden_columns.html

https://datatables.net/examples/api/show_hide.html

В приведенных выше примерах показано, как скрыть оба столбца по умолчанию, а затем отобразится позже с событием.

По умолчанию скрыть:

var table = $('#example').DataTable( {
    "columnDefs": [
        {
            "targets": [ 2 ],
            "visible": false,
            "searchable": false
        },
        {
            "targets": [ 3 ],
            "visible": false
        }
    ]
} );

Сделать видимым при клике

$('a.toggle-vis').on( 'click', function (e) {
    e.preventDefault();

    // Get the column API object
    var column = table.column( $(this).attr('data-column') );

    // Toggle the visibility
    column.visible( ! column.visible() );
} );