Адаптивное расширение — скрыть все столбцы, кроме первого.

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

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


javascript jquery datatables
person Tanker    schedule 05.08.2015    source источник

Ответы (2)


arrow_upward
2
arrow_downward

РЕШЕНИЕ

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

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

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

    columnDefs: [
        { className: 'screen-xs': targets: [1,2,3] }
    ]
});
person Gyrocode.com    schedule 17.08.2015

arrow_upward
0
arrow_downward

Вы можете добавить элемент управления классом к определенным столбцам, чтобы указать, какие столбцы должны отображаться на экранах с определенным разрешением. Либо по атрибуту 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 ...
});
person gabriel    schedule 23.11.2016