1

I'm attempting to make a response datatable, as demonstrated here: https://datatables.net/examples/styling/bootstrap.html

I'm using dc.js to populate my datatable, and it successfully get's populated. However, none of the features work (e.g. search, sorting, filter the number of entries, etc.). That said, I am able to see all the features visually (it just has no effect).

NOTE: Randomly (about 5% of the time) the DataTable works exactly as expected (with page numbers, search, etc.). Unfortunately, when I refresh, it stops.

Here is the HTML portion:

<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 code to initialize:

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

Lastly, in my HTML, in the bottom of all my scripts, I have:

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

I have explored the following posts, but no such luck:

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

Community
  • 1
  • 1
cynical biscuit
  • 323
  • 1
  • 5
  • 17
  • 1
    Yeah, dc.dataTable isn't intended to be used that way. Although it has the same name as this library, that is a coincidence and there is no compatibility. You'll have trouble in general trying to create html elements with two owners. Probably you want to feed the data from dc to DataTable. Here's an issue which describes how to do that: https://github.com/dc-js/dc.js/issues/966 – Gordon Jan 24 '16 at 02:24
  • Thanks for that link. That's pretty unfortunate because on occasion, the DataTable works exactly as expected. I think this is due to the fact that json rendered by DC.JS takes longer to populate before the DataTable (by jQuery) is initialized. That's my understanding at least. Is it possible to wait a second or two, before initializing. I know this is a hack, but it would be nice if I could get this to work even if it's a temporary fix. – cynical biscuit Jan 24 '16 at 03:36
  • probably working the first data comes through from dc and is transformed by datatables.js and looks good. Then dc updates the table, as it has to do to implement filtering, and it looks bad. So, no, unless you don't want filtering (in which case, why are you using dc?) the two libraries are bound to step on each other's toes. – Gordon Jan 24 '16 at 04:08
  • working – Gordon Jan 24 '16 at 16:19
  • Yes, I sort of got a hackish way to at least always load with the working DataTable features. However, once the data gets filtered (and yes, the data IS being filtered -- hence why I'm using DC), it stops working. I am a fan of dcjs, I hope they improve their DataTable in the future to include these features! What do you mean by working ? – cynical biscuit Jan 25 '16 at 21:17
  • I had a typo in my comment, was trying to cross it out. :) The right way to fix this is with a component that coordinates the communication between the two libraries - having two libraries control the same elements is not going to work. I'm the dc.js maintainer and I haven't found anyone to contribute this component, since everyone eventually gets it working some hacky way or another and then it's not an issue anymore. – Gordon Jan 25 '16 at 21:31
  • When I have the time (sometime in the future), I'm going to try to write the component which ties both libraries. Issue is that I don't know how to re-initialize the jQuery Datable (I want to do this every time I do the filter not just render, which probably isn't the most optimal solution either -- but it's a good first step), and I have more important things to work on. Regardless, I really appreciate your input to this post. Thanks – cynical biscuit Jan 26 '16 at 03:23
  • 1
    The issue I linked above tells the stories of quite a few ad hoc implementations that apparently work. It may be as simple as watching the [pretransition or renderlet events](https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#basemixinon--basemixin) on the table. – Gordon Jan 26 '16 at 03:58
  • That's exactly where I thought I would need to modify it. I'm currently using the renderlet event (i.e ".on('renderlet', function(chart, filter){...})"). However, I'm not sure where the Datatable initialization (or re-initialization) will be. Truth is that I'm not too familiar with jquery DataTable. – cynical biscuit Jan 26 '16 at 16:22

1 Answers1

2

Sweet, I got it working :). I added the following code in renderlet event. If you have any tips on making it optimal, please let me know.

.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();
...
}

I'm essentially recreating the jQuery DataTable object.

cynical biscuit
  • 323
  • 1
  • 5
  • 17