数据表 show/hide sorting/paging

Question

我有一个问题 datatables.net 我想根据屏幕宽度超过 700px 时显示 sorting/paging 并在低于 700px 时隐藏它。当我从超过 700px 变为低于 700px 时它起作用但是当我再次增加宽度时 sorting/paging 不再显示。我读过有关具有 destroy/retrieve 属性的数据表，但我无法弄清楚出了什么问题。

现在已通过下面更新的代码修复此问题！

我的 javascript 代码如下所示：

   $(window).resize(function() {
    var isLarge = $(this).width() > 700;
    $('#transactionsTable').dataTable({
        destroy: true,
        searching: isLarge,
        paging: isLarge
    });
});

我现在的问题：

出于某种原因，当我更改屏幕宽度以检查响应式设计时，css 似乎无法正确加载。因此，如果我从大屏幕宽度变为较小屏幕宽度，顶部 paging/searching 的 css 不会加载。

有什么建议吗？

Answer 1

来自retrieve选项的description（强调我的）：

Retrieve the DataTables object for the given selector. Note that if the table has already been initialised, this parameter will cause DataTables to simply return the object that has already been set up - it will not take account of any changes you might have made to the initialisation object passed to DataTables (setting this parameter to true is an acknowledgement that you understand this!).

您需要在您的 if 案例中删除 retrieve: true（并更改为 destroy: true）或将其简化为

$(window).resize(function() {
    var isLarge = $(this).width() > 700;
    $('#transactionsTable').dataTable({
        destroy: true,
        searching: isLarge,
        paging: isLarge
    });
});

数据表 show/hide sorting/paging

Datatable show/hide sorting/paging

.net

sorting

datatable

paging

jquery-datatables