CODEWITHSUNDEEP
javascriptjqueryhtmld3.jsdatatable
iBadGamer
iBadGamer

Reputation: 606

Javascript error in DataTables when using D3.js

I have an issue with the utilisation of d3.js and Datatables. I love the render of DataTables so I wanted to use it for a school project where I have to use D3.js.

The problem is when I create the table with D3.js like in this fiddle I have the error

"Uncaught TypeError: Cannot read property 'mData' of undefined"

I thought this was because the table was not created yet when I call the $('#table').DataTable() but the console.log($('#table').html()); shows the correct html code...

I search this error on Google but the issues with the same error were relative to the structure of the table (missing tbody, missing close tag, different column number in thead/tbody etc.) but if I put the html code alone, it work just as expected: fiddle

I don't think this is an error with Datatables because it work fine with the same HTML code so maybe I misunderstand something with D3.js ...

Thanks in advance for any leads

Upvotes: 1

Views: 286

Answers (1)

Mark
Mark

Reputation: 108537

You are missing a <tr> on your header row:

var thead = d3.select("thead")
  .append("tr") //<-- missing tr
  .selectAll("th")
  .data(d3.keys(stations[0]))
  .enter().append("th").text(function(d) {
    return d
  });

Update fiddle.

In your working version, the browser is correcting the malformed HTML when it parses it:

<thead>
  <tr><th>name</th> <!-- what the browser actually renders -->
  <th>city</th>
</tr></thead>

Upvotes: 1

Related Questions