DataTables columns (). Every (): эта проблема, когда более одной таблицы

1

Документация DataTables для columns().every() Each() https://datatables.net/reference/api/columns().every():

Этот метод 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/

Теги:
datatables

1 ответ

1
Лучший ответ

Это потому, что ваш селектор - это просто "таблица".

Рассмотрим идентификацию каждой из ваших таблиц, а затем примените правильный селектор:

....<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/

Поделиться
  • 0
    Обновление может делать то, что я ищу. Благодарю. Поведение, которое я заметил, будет ошибкой в DataTables?
  • 0
    совсем нет, это то, что он должен делать ....
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню