DataTables - 在大屏幕上响应隐藏列

Question

我有一个DataTables的问题 - 我想使用响应式附加组件来隐藏较小屏幕尺寸的列，不幸的是，响应式附加组件在更大的屏幕尺寸上隐藏列，而实际上并不需要。

这是我的javascript代码：

    var table = $('#peopleTable').DataTable({
        responsive: true,
        ajax: {
            dataType: 'text',
            type: 'POST',
            url: apiUrl,
            dataSrc: function (json) {
                return $.parseJSON(json);
            }
        },
        columns: [
            {
                data: 'name',
                responsivePriority: 1,
                width: '5%',
                render: function (data, type, row) {
                    return '<a href="<?php echo $localPath;?>/people/person.php?id=' + row.id + '"><img class="icon" title="' + row.people_type + '" src="<?php echo $localPath; ?>/webimg/people-type/b/' + row.people_type_id + '.png">' + row.main_contact + ' @ ' + row.name + '</a>';
                }
            },
            /*{
                data: 'main_contact',
                responsivePriority: 1,
                width: '5%'
            },*/
            { 
                data: 'add1',
                responsivePriority: 1,
                width: '5%',
                render: function (data, type, row) {
                    var output = [];
                    if (row.add1) { output.push(row.add1); }
                    if (row.add2) { output.push(row.add2); }
                    if (row.add3) { output.push(row.add3); }
                    if (row.town) { output.push(row.town); }
                    var outputStr = output.join(', ');
                    return '<span class="address-trunc" title="' + outputStr + '">' + outputStr + '</span>';
                }
            },
            {
                data: 'phone',
                responsivePriority: 1,
                width: '5%'
            },
            /*{
                data: 'email',
                responsivePriority: 1,
                width: '5%',
                render: function (data, type, row) {
                    return '<a href="mailto:' + row.email + '">' + row.email + '</a>';
                }
            },*/
            {
                data: 'id',
                orderable: false,
                responsivePriority: 1,
                width: '5%',
                render: function (data, type, row) {
                    var url = '<?php echo $localPath;?>/people/person.php?id=' + row.id;
                    return '<a href="' + url + '" class="btn btn-sm btn-secondary">View</a> '
                        <?php if ($activeUser->can('delete')) { ?>
                            + '<a href="#" class="btn btn-sm btn-secondary delete-person" data-person="' + row.name + '" data-id="' + row.id + '">Delete</a>'
                        <?php } ?>
                            ;
                }
            }
        ]
    });

正如您所看到的，我一直在玩代码，以使所有列都显示在大屏幕上。

当我开始时我有更多的列在游戏中（它们现在被注释掉了），我将所有宽度加起来达到100％，并且我将所有responsivePrioritys设置为正确的值（而不是它们都是1）。

减少列数，设置较低的宽度，改变responsivePrioritys - 做所有这些事情没有任何效果，在大屏幕上，响应式附加组件仍然坚持隐藏至少1列。

我怎么阻止这个？我仍然想使用附加组件，因为它在较小的屏幕上非常有用，但我不希望它在不需要时强制隐藏列。

为了向您展示正在发生的事情，这里是一个屏幕截图 - 您可以看到巨大的几乎空的列，其中有足够的空间容纳另一列 - 但DataTables坚持要在最左边的+符号后面隐藏一列。

Answer 1

当列应该可见/隐藏时，响应式扩展有许多classes来配置。

您可以使用desktop类来指定窗口宽度大于或等于1024 px时显示的列。

有关代码和演示，请参阅this example。

Answer 2

为什么不用

var table = $('#peopleTable').DataTable({
  responsive: window.innerWidth < 1000 ? true : false,
  ...
})

我的意思是在不需要时不要初始化响应式扩展。 1000只是一个建议，“更大的屏幕尺寸”是相对:)

但是ー> z zxswい