Question

columns().every() https://datatables.net/reference/api/columns().every()的DataTables文档：

此columns（）。every（）方法...将回调函数的上下文设置为是相关列的column（）实例。

但是，在下面的代码中有两个表，this总是引用第一个表，即使在迭代第二个表的列时也是如此。它不会在第二个表中设置类。相反，它将它设置在第一个表中两次。我究竟做错了什么？或者我怎样才能优雅地解决这个问题？

<!DOCTYPE html>
<html>
<title>DataTables test</title>
<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();
    $(nodes).addClass('bgcolor');
  });
});
</script>

https://jsfiddle.net/a3j6zv62/

Answer 1

这是因为你的选择器只是'table'。

考虑识别每个表，然后应用正确的选择器：

....<table id="example2">....

然后：

$('#example2').DataTable(.....

请参阅更新的小提琴：https://jsfiddle.net/a3j6zv62/1/

更新：

要在文档的所有表中执行此操作，只需使用一些jquery循环：

$('table').DataTable({dom: 't'});
$('table').each(function() {
  var api = $(this).dataTable().api();
  api.columns().every(function(columnIndex, tableCounter) {
    var nodes = this.nodes();
    console.log([columnIndex, tableCounter, nodes]);    
    $(nodes).addClass('bgcolor');
  });
});

另请参阅更新的小提琴https://jsfiddle.net/a3j6zv62/3/

DataTables columns（）。every（）：当多个表时出现此问题

1 个答案: