Question

我在使用DataTables时遇到问题-我想使用响应式附件来隐藏较小屏幕尺寸的列，但是不幸的是，响应式附件确实不需要时在较大屏幕尺寸上隐藏列。 / p>

这是我的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）。

减少列数，设置较小的宽度，更改responsivePriority-完成所有这些操作都没有效果，在大屏幕上，响应式加载项仍坚持隐藏至少1列。 / p>

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

为向您展示正在发生的事情，这是一个屏幕截图-您可以看到巨大的几乎为空的列，其中另一列有足够的空间-但是DataTables坚持将列隐藏在{{1}之后}符号放在最左侧。

Answer 1

响应式扩展程序具有许多classes来配置何时应显示/隐藏列。

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

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

Answer 2

为什么不仅仅使用

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

我的意思是根本不需要初始化响应式扩展。 1000只是一个建议，“较大的屏幕尺寸”是相对的：）

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

DataTables-大屏幕上的响应式隐藏列

2 个答案: