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

Question

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

我正在使用 dc.js 填充我的数据表，它已成功填充。但是，none 的功能有效（例如搜索、排序、过滤条目数等）。也就是说，我能够直观地看到所有功能（只是没有效果）。

注意：随机（大约 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 数据表

How to properly render dc.js datatable using jquery and Bootstrap

datatables

dc.js