Question

我正在使用最新版本的带有响应式扩展的jQuery DataTable。

一切都适用于平板电脑或台式机，但如果屏幕低于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。

Answer 1

<强>解

您可以使用responsive.breakpoints和columns.className来控制某些浏览器宽度的某些列的可见性。有关详细信息，请参阅Class logic页面。

要在浏览器宽度为600px或更高时折叠除4列表中第一列以外的所有列，请使用以下代码。为简单起见，我省略了一些代码：

$('#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 ...
});

响应式扩展 - 隐藏第一个列

2 个答案: