Разница между node.innerHTML и cell.data() в DataTables

Ссылка на тестовый пример: http://live.datatables.net/yevonevo/1/edit?html,js,output
Ссылка на руководство по документации: https://datatables.net/examples/api/counter_columns.html

Цель: создание столбца индекса, который ведет себя как столбец «ранжирования» сразу после инициализации, чтобы он присваивал фиксированные индексы строкам, которые будут сохранены при изменении порядка таблицы в соответствии с другими столбцами.

Я играю и придумал 2 разных способа, которые ведут себя немного по-разному:

  1. Установка свойства данных ячейки:
$('#example').on('init.dt', function() {
  console.log('init');
  let i = 1;
  $('#example').DataTable().cells(null, 0, { search: 'applied', order: 'applied' }).every(function (cell) {
    this.data(i++);
    });
});
var table = $('#example').DataTable({
    pageLength: 5,
    order: [[1,'asc']]
});
  1. Установка innerHTML узла:
$('#example').on('init.dt', function() {
   $('#example').DataTable().column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
       cell.innerHTML = i+1;
       });
});
var table = $('#example').DataTable({
    pageLength: 5,
    order: [[1,'asc']]
  });

Оба создают индексы идеально, но хотя я могу вручную изменить порядок таблицы на основе значений ранжирования первого столбца, используя первое решение, я не могу использовать этот столбец для изменения порядка с использованием второго варианта (вручную я имею в виду после того, как создал таблицу и нажимал на стрелки сортировки).

Почему это происходит?

Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Создайте ползком, похожим на звездные войны, с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
учебник по Javascript
учебник по Javascript
JavaScript - это язык программирования, который обычно используется для добавления интерактивности и других динамических функций на веб-сайты. Он...
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
Как использовать d3.js для рисования 2D SVG-элементов в приложении Angular?
D3.js - это обширная библиотека, используемая для привязки произвольных данных к объектной модели документа (DOM). Мы разберем основные варианты...
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Освоение принципов SOLID в JavaScript: Пошаговое руководство
Принцип единой ответственности (SRP): класс должен иметь только одну причину для изменения. Другими словами, у него должна быть только одна...
JavaScript - For Loop
JavaScript - For Loop
Наиболее используемая компактная форма оператора цикла.
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
1
0
71
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Когда вы вносите изменения непосредственно в узел в DOM (изменение HTML-таблицы)...

cell.innerHTML = i+1; 

...тогда вы используете веб-API, а не функцию DataTables.

Это изменение невидимо для DataTables (базовой структуры данных JavaScript), если только вы не сообщите DataTables об этом изменении. Если DataTables перерисовывает таблицу, она будет использовать свои внутренние данные, а любые изменения DOM в таблице HTML будут отброшены.

Данные, которые вы видите при просмотре веб-страницы, могут не совпадать с данными, сохраненными в DataTables.

Сравните это с функцией API DataTables, такой как:

cell().data( value ) 

...который обновляет базовые данные DataTable. Теперь, когда происходит перерисовка таблицы (явно или неявно), вы видите эти данные.


DataTables при инициализации присваивает внутренний идентификатор строки, отсчитываемый от нуля, в зависимости от порядка загрузки строк из любого источника, который вы используете. Вы можете сделать этот внутренний идентификатор видимым, если хотите:

"render": function ( data, type, row, meta ) {
  return meta.row + 1;
}

Смотрите columns.render

Пример:

$(document).ready(function() {
var table = $('#example').DataTable( {

  "columnDefs": [ {
    "targets": 0,
    //"data": "",
    "render": function ( data, type, row, meta ) {
      return meta.row + 1;
    }
  } ]

} );
} );
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Index</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td></td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td></td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td></td>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td></td>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
            <tr>
                <td></td>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>61</td>
                <td>2012/12/02</td>
                <td>$372,000</td>
            </tr>
            <tr>
                <td></td>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>59</td>
                <td>2012/08/06</td>
                <td>$137,500</td>
            </tr>
            <tr>
                <td></td>
                <td>Rhona Davidson</td>
                <td>Integration Specialist</td>
                <td>Tokyo</td>
                <td>55</td>
                <td>2010/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td></td>
                <td>Colleen Hurst</td>
                <td>Javascript Developer</td>
                <td>San Francisco</td>
                <td>39</td>
                <td>2009/09/15</td>
                <td>$205,500</td>
            </tr>
            <tr>
                <td></td>
                <td>Sonya Frost</td>
                <td>Software Engineer</td>
                <td>Edinburgh</td>
                <td>23</td>
                <td>2008/12/13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td></td>
                <td>Jena Gaines</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>30</td>
                <td>2008/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td></td>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td></td>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
        </tbody>
    </table>

</div>



</body>
</html>

Спасибо за объяснение, именно то, что мне не хватало.

Marta Fernandez 22.11.2022 08:37

И последнее замечание: я отказался от опции columns.render, потому что назначенный внутренний индекс соответствует порядку в источнике данных. Если вы применяете определенный порядок приоритетов при определении своей таблицы, столбец индекса не будет отражать этот порядок, поэтому мне нужно поймать событие инициализации, а затем назначить индекс, чтобы учесть эту конкретную сортировку.

Marta Fernandez 22.11.2022 08:43

Другие вопросы по теме