javascript - 响应式扩展 - 隐藏除第一列之外的所有列

Question

我正在使用最新版本的 jQuery DataTables 和响应式扩展。

在平板电脑或台式机上一切正常，但如果屏幕低于 600px。当其中的响应式踢脚仅隐藏 1 列时，我有 4 列，在某些平板电脑中这很好，但某些手机仅隐藏 2 列，让我显示 2 列。

当屏幕或移动设备宽度低于 600px 时，我想隐藏最后 3 列，并仅保留第一列(如果可能)。

我正在阅读 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

SOLUTION

您可以使用responsive.breakpoints以及columns.className控制某些列在某些浏览器宽度下的可见性。请参阅Class logic页面了解更多信息。

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

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

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