Question

我尝试制作响应数据表，如下所示： https://datatables.net/examples/styling/bootstrap.html

我使用dc.js来填充我的数据表，并且它已成功填充。但是，这些功能都不起作用（例如搜索，排序，过滤条目数等）。也就是说，我能够直观地看到所有功能（它只是没有效果）。

注意：随机（大约5％的时间）DataTable完全按预期工作（包含页码，搜索等）。不幸的是，当我刷新时，它会停止。

以下是HTML部分：

<table class="table table-bordered table-hover" id="dc-table-graph">
  <thead>
    <tr class="header">
      <th>Post Information</th>
      <th>Post Text
      </th>
    </tr>
    </thead>
</table>

要初始化的dc.js代码：

var dataTable = dc.dataTable("#dc-table-graph");

最后，在我的HTML中，在我所有脚本的底部，我有：

<script>
  $(function () {
    $('#dc-table-graph').DataTable({
      "paging": true,
      "lengthChange": true,
      "searching": true,
      "ordering": true,
      "info": true,
      "autoWidth": false
    });
  });
</script>

我已经探讨了以下帖子，但没有这样的运气：

dc.js - data table using jquery data-table plugin

Answer 1

很好，我得到了它的工作:)。我在renderlet事件中添加了以下代码。如果您有任何关于使其达到最佳的提示，请告诉我。

.on('renderlet', function (table) {
...
...

      // Clear jQuery DataTable if already created
     if ( $.fn.dataTable.isDataTable('#dc-table-graph') ) {
        $('#dc-table-graph').dataTable().fnDestroy();
     }
     // create jQuery DataTable
     var jqtable = $('#dc-table-graph').dataTable();
...
}

我实际上是在重新创建jQuery DataTable对象。

如何使用jquery和Bootstrap正确呈现dc.js数据表

1 个答案: