columns().every() : `this` issue when more than one table

PaulH

When the api covers more than one table, like in the code below with two tables, columns().every() does not provide this context for the second table. In the console, we see tableCounter values 0 and 1, but this.nodes() always refers to the first table. I did not expect that. Is that intended?

<link rel="stylesheet" href="//cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css">
<style>
.bgcolor {
  background-color: red;
}
</style>
<script src="//code.jquery.com/jquery-3.2.1.js"></script>
<script src="//cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

<table>
  <thead><tr><td>Head
  <tbody><tr><td>Cell in first table
</table>
<table>
  <thead><tr><td>Head
  <tbody><tr><td>Cell in second table
</table>

<script>
$(function() {
  var tables = $('table').DataTable();
  tables.columns().every(function(columnIndex, tableCounter) {
    var nodes = this.nodes();
    console.log([tableCounter, $(nodes).html()]);  
    $(nodes).addClass('bgcolor');
  });
});
</script>

https://jsfiddle.net/a3j6zv62/4/

allan

Is that intended?

No. That's a bug. The this context should always relate to the table for the item (cell, row, whatever) in question.

Thanks for letting me know about this. I'll look into what is causing it.

Allan

PaulH

Super allan, wonderful. Thanks.

PaulH

See workaround: https://stackoverflow.com/questions/46828471/