Problem with HTML entities in DOM source Datatable

Wernfried · October 13

I have this simple table:

<table class="compact table is-narrow is-hoverable" id="datatable">
  <tbody>
    <tr>
      <td>Back &amp; White</td>
    </tr>
  </tbody>
</table>

new DataTable('#datatable', {
   columns: [{ name: 'name', data: 'name', orderable: true }],
});


console.log($('#datatable').DataTable().rows().data().toArray().map(x => x.name))

-> Back &amp; White

As output I would rather expect Back & White. Is this behavior as designed?

My current workaround is this:

$('#datatable').DataTable().rows().data().toArray().map(x => $('<textarea>').html(x.name).text())

allan · October 13

At the moment, yes, it is working as designed. It doesn't manipulate the data. The entities are a bit of a pain (as you've seen), and converting them is not a particularly fast process if there are a lot of rows. Using JSON data, rather than reading from the HTML, sidesteps the problem.

Allan

Problem with HTML entities in DOM source Datatable

Problem with HTML entities in DOM source Datatable

Answers