响应扩展-隐藏所有列，但第一个

Responsive extension - Hide all columns but the first one

本文关键字：第一个 扩展 隐藏所 响应      更新时间：2023-09-26

我使用的是最新版本的jQuery数据表与响应扩展。

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

我想隐藏最后3列，只留下第一列，如果可能的话，只有当屏幕或移动低于600px的宽度。

我正在阅读数据表文档，但我找不到任何东西隐藏所有当屏幕下降到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: ''
    }
});

我知道我使用的选项名来自以前版本的数据表，但他们仍然工作。

当屏幕低于X时，我如何隐藏除一列外的所有列呢?我可以使用CSS来做到这一点，但我们的想法是能够使用jQuery DataTable

<

解决方案/strong>

您可以使用responsive.breakpoints和columns.className来控制某些列在特定浏览器宽度下的可见性。有关更多信息，请参阅类逻辑页面。

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

$('#example').DataTable({
    responsive: {
        breakpoints: [
            { name: 'screen-xs',  width: 600 }
        ]
    },
    columnDefs: [
        { className: 'screen-xs': targets: [1,2,3] }
    ]
});

您可以向某些列添加类控件，以便指定哪些列应该以特定的分辨率显示在屏幕上。通过表头的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 ...
});
相关文章：