Блог

Главная - Вопросы по программированию - Поиск и изменение данных в строках, которые были отфильтрованы в таблице таблиц данных

Поиск и изменение данных в строках, которые были отфильтрованы в таблице таблиц данных

#datatables

Вопрос:

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

После создания в виде HTML таблица содержит классы в tr элементах, чтобы определить, откуда взялась строка. Я написал некоторый упрощенный код, который работает так же, как и мой реальный код, для обновления таблицы в этом jsfiddle и показан ниже.

Проблема в том, что если пользователь фильтрует таблицу (с помощью фильтра таблиц данных), ячейки не обновляются, если они не видны, когда пользователь обновляет данные. В примере кода, если вы нажмете кнопку обновить, пока отображается идентификатор строки 32, он будет обновлен. Если вы отфильтруете, скажем, 33, а затем нажмете кнопку, идентификатор строки 32 не будет обновлен новым случайным значением. Обратите внимание, что это классы, потому что на самом деле существует несколько классов для предоставления уникального идентификатора на основе идентификатора источника и строки — несколько строк могут иметь один и тот же идентификатор из разных источников.

Как я могу обновить HTML для скрытых строк? В соответствии с примером кода, когда я получу данные, которые мне нужно обновить, я буду знать идентификатор строки, и у меня будет массив новых значений в том же порядке, что и столбцы (т. Е. позиция массива 0 = td:nth-дочерний элемент(1))

 $("table").dataTable();

$("#changeCell").on("click", function() {
$("tr.row-id-32 td:nth-child(1)").html("Val 32-1 NEW:" Math.random());
$("tr.row-id-32 td:nth-child(2)").html("Val 32-2 NEW:" Math.random());
}); 
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>

<button id="changeCell">Change row ID 32</button>

<table border=1>
<thead><tr><th>Col 1</th><th>Col 2</th></tr></thead>
<tbody>
  <tr class="row-id-32"><td>Val 32-1</td><td>Val 32-2</td></tr>
  <tr class="row-id-33"><td>Val 33-1</td><td>Val 33-2</td></tr>
  <tr class="row-id-34"><td>Val 34-1</td><td>Val 34-2</td></tr>
</tbody>
</table>

Ответ №1:

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

Шаги:

  1. Запустите фрагмент кода.
  2. Нажмите на кнопку «Изменить идентификатор строки 37».
  3. Перейдите на страницу 2, чтобы просмотреть изменения, внесенные в идентификатор строки 37.
 $(document).ready(function() {

  var table = $('#example').DataTable( {
    "pageLength": 4
  } );

  $("#changeCell").on("click", function() {
    var node = table.rows('.row-id-37').nodes();
    $( node ).find('td:nth-child(1)').html("Val 37-1 NEW:" Math.random());
    $( node ).find('td:nth-child(2)').html("Val 37-2 NEW:" Math.random());
  });

} ); 
 <!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;">

    <button id="changeCell">Change row ID 37</button>

    <br><br>

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr><th>Col 1</th><th>Col 2</th></tr>
        </thead>
            <tbody>
                <tr class="row-id-32"><td>Val 32-1</td><td>Val 32-2</td></tr>
                <tr class="row-id-33"><td>Val 33-1</td><td>Val 33-2</td></tr>
                <tr class="row-id-34"><td>Val 34-1</td><td>Val 34-2</td></tr>
                <tr class="row-id-35"><td>Val 35-1</td><td>Val 35-2</td></tr>
                <tr class="row-id-36"><td>Val 36-1</td><td>Val 36-2</td></tr>
                <tr class="row-id-37"><td>Val 37-1</td><td>Val 37-2</td></tr>
                <tr class="row-id-38"><td>Val 38-1</td><td>Val 38-2</td></tr>
            </tbody>
    </table>

</div>

</body>
</html>

Это основывается на вашей логике несколькими способами:

  1. Он присваивает таблице переменную при ее инициализации, чтобы мы могли получить доступ к API таблиц данных:

    таблица var = $(‘#пример’).Данные();

В моем примере, только для тестирования/демонстрации, я заставляю каждую страницу показывать только 4 строки, чтобы убедиться, что есть «страница 2», на которой происходит обновление.

  1. Он использует API таблиц данных для выбора строки с помощью селектора jQuery:

    var узел = таблица.строки(‘.идентификатор строки-37’).узлы();

ПРИМЕЧАНИЕ: Поскольку он использует класс, может быть возвращено несколько узлов. Учитывая, что идентификаторы ваших классов уникальны (я предполагаю), вы можете использовать идентификатор вместо класса в своем HTML.

Как только у вас есть узел (или узлы), вы можете обновить его (или их) с помощью jQuery — так же, как это делает ваш код.

Преимущество использования API DataTables заключается в том, что именно здесь хранятся все данные, независимо от того, какое подмножество отображается в DOM/странице в любой конкретный момент времени.

Смотрите rows() и row-selector для получения более подробной информации.

Метки: ,