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%，并且我将所有 responsivePriority 设置为正确的值（而不是它们都是 1).

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

我该如何阻止它？我仍然想使用该插件，因为它在较小的屏幕上非常有用，但我不希望它在不需要时强制隐藏列。

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

Answer 1

为什么不直接使用

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

我的意思是在不需要时不初始化响应式扩展。 1000只是一个建议，"larger screen sizes"是相对的:)

演示 -> http://jsfiddle.net/8vtqsf7z/

Answer 2

响应式扩展有很多 classes 来配置何时列应该是 visible/hidden。

您可以使用 desktop class 指定显示的列 window 宽度大于或等于 1024 像素。

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

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

DataTables - Responsive hiding columns on large screens

responsive