在没有数据的情况下初始化时，数据表响应不起作用

Question

我在带有 ajax 源服务器端数据的数据表上使用Datatables 响应式扩展。初始化是这样的：

 var oTable = $('#sales-report').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": $("#rooturl").val() + '/Reporting/Reports/PopulateDatatable',
            "data": function ( d ) {
                return $.extend( {}, d, {
                    "date_start_filter": $('#FilterDateStart').val(),
                    etc...
             });
        }
    },
    'columns': [
                {
                    'data': 1
                },
                 etc...
               ]
      }); 

该表如下所示，该类responsive是初始化器：

<table class="table responsive table-bordered table-striped table-highlight nowrap " id="sales-report" width="100%" >
    <thead>
       <tr>
          <th>Date</th>
          <th>SKU</th>
          etc....
       </tr>
    </thead>
    <tbody></tbody>
</table>

当页面加载时，表中没有数据。然后，用户选择过滤选项并点击search哪个呼叫draw()。

假设从搜索返回数据，数据表工作正常，但未启用响应式“折叠”功能。如果随后刷新页面而不更改任何其他内容，则折叠将起作用。

我尝试以不同的方式初始化表，但结果仍然相同。我确信这与数据是 ajax 来源这一事实有关，但我现在陷入困境。有任何想法吗？

Answer 1

\n

解决方案

\n

\n\n

尝试将以下代码放在 后面，search()以在显示更改后重新计算响应式扩展使用的宽度。

\n\n

$(\'#sales-report\').DataTable()\n   .columns.adjust()\n   .responsive.recalc();\n

\n\n

responsive.recalc()有关详细信息，请参阅API 方法。

\n\n

\n

演示版

\n

\n\n

有关代码和演示，请参阅此 jsFiddle 。

\n\n

\n

链接

\n

\n\n

请参阅jQuery DataTables \xe2\x80\x93 Bootstrap 选项卡的列宽问题，了解 jQuery DataTables 和 Bootstrap 选项卡最常见问题的解决方案。

\n