Как вы программно открываете несколько строк в DataTables

Question

Я думал, что на этот вопрос ответили бы, но я не могу решить это. Попробовал:

• https://datatables.net/forums/discussion/25833/is-there-any-way-to-programmatically-select-rows
• https://datatables.net/reference/api/row().select()

Я использую DataTables 1.10.16 в режиме serverSide - мои данные загружаются через ajax, а не при загрузке страницы.

Моя разметка - это просто таблица с идентификатором, #substancesTable:

<table id="substancesTable" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>EC</th>
            <th>CAS</th>
            <th>Name</th>
         </tr>
     </thead>
</table>

JS для загрузки данных выглядит следующим образом:

var substancesTable = $('#substancesTable').DataTable({
    "processing": true,
    "serverSide": true,
    "searching": false,
    "ajax": {
        "url": "/get-substances.json",
        "dataSrc": function (json) {
             return json.data;
        }
    }
});

Это отлично заполняет мой стол. У меня есть обработчик событий, такой, что когда пользователь вручную нажимает на строку (любой элемент <td> внутри #substancesTable), он делает дополнительный запрос AJAX, чтобы получить больше данных, которые затем заполняются внутри <td>, что пользователь щелкнул. Этот код также отвечает за закрытие / свертывание любых открытых строк:

$('#substancesTable tbody').on('click', 'td', function () {
    var tr = $(this).closest('tr');
    var row = substancesTable.row( tr );

    if ( row.child.isShown() ) {
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        row.child( expand_substance(row.data()) ).show();
        tr.addClass('shown');
    }
} );

Приведенный выше код вызывает функцию expand_substance, которая обрабатывает упомянутый запрос ajax. Это все отлично работает.

Я пытаюсь найти способ программно открывать определенные строки. Под этим я подразумеваю массив идентификаторов строк, на которые нажал пользователь, например,

var openRows = [5, 6, 8, 33, 100];

Данные этого массива будут храниться в Redis (кеше), поэтому, если пользователь уходит со страницы, когда он возвращается, данные в openRows будут загружены, и я хочу открыть соответствующие строки. Но я не знаю, как заставить DataTables открывать строки 5, 6, 8, 33, 100 и т. Д.

Ссылки выше, похоже, не работают для меня. Например, если я попытаюсь:

substancesTable.row(':eq(0)', { page: 'current' }).select();

Я получаю консольную ошибку:

VM308:1 Uncaught TypeError: substancesTable.row is not a function

Я не уверен, что это как открыть строку, но не смог найти больше информации, которая помогла.

Итак, возможно ли использовать JavaScript для открытия определенных строк таблицы на основе массива известных идентификаторов (openRows)?

Answer 1

Ответ на этот вопрос был предоставлен коллегой и использует обратный вызов rowCallback (https://datatables.net/reference/option/rowCallback), который обеспечивает DataTables.

var substancesTable = $('#substancesTable').DataTable({

// ...

"rowCallback": function(row) {
       var id = $(row).find('td:first').text();
       var index = $.inArray(id, openRows);

       if (index !== -1) {
           var tr = $(row).closest('tr');
           var row = substancesTable.row( tr );
           row.child( expand_substance(row.data()) ).show();
           tr.addClass('active');
       }
    }
});

Этот обратный вызов будет обрабатывать каждую строку (представлен row). Строка var index = $.inArray(id, openRows); означает текущую строку (обозначенную текстом из var id) в массиве openRows. Поскольку первый столбец в моей таблице содержит идентификатор, мы можем найти соответствие между var id и openRows.

Если идентификатор найден, он вызывает функцию, которую я написал, под названием expand_substance(). Это не имеет ничего общего с DataTables, это пользовательская функция js.

В моем случае функция expand_substance() отвечает за выполнение ajax-вызова для получения более подробной информации, которая затем вводится в строку:

function expand_substance ( rowData ) {
    var div = $('<div/>')
        .text('Loading...');

    $.ajax( {
        url: '/view-substance/expand-substance/' + rowData.id,

        dataType: 'html',
        success: function ( data ) {
            div.html(data);
        }
    });

    return div;
}

Это требуется только потому, что, когда пользователь расширяет строку в моем приложении, отображаемая информация получается с помощью запроса ajax. Теоретически expand_substance() может не использоваться, если данные присутствовали при загрузке страницы.

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

Answer 2

Это было забавно решить ( в надежде, что я сделал ) ... так как это довольно сложно и сложно.

Во-первых, я должен отметить, что невозможно (или, по крайней мере, трудно) создать демо-версию, используя функцию на стороне сервера, поэтому я использовал пример «нулевой конфигурации» DataTable .

Теперь, я надеюсь, я правильно понимаю, что массив индексов строк должен быть предварительно сохранен по щелчкам пользовательских строк ... И что это начальная точка текущего вопроса, чтобы повторно использовать этот массив для манипулирования строками.

В моем примере всего 57 строк ... Поэтому я использовал этот массив: var targets = [5, 6, 8, 33].

Решение шаг за шагом:

1. Используйте drawCallback для запуска цикла for в массиве.
2. Получить нарисованные строки в правильном порядке ... Что означает после sort.
   Нам нужно использовать селектор строк вместе с полезным трюком { order: 'applied' }.
   ( Нашел в вопрос форума dataTables )
3. Получите nodes от него.
4. Таргетинг на правильные строки на основе массива с использованием метода jQuery .eq().
   Поэтому мы должны сначала создать объект jQuery с коллекцией строк (обтекание $()).
5. Управляйте строками!
   В моем примере я просто добавил красный цвет фона для ребенка td.
   Вы будете делать свои вещи отсюда.

Так вот и вся функция:

"drawCallback": function(){
  var api = this.api();

  for(i=0;i<targets.length;i++){
    $(api.rows({ order: 'applied' }).nodes()).eq(targets[i]).find("td").addClass("red");
    console.log(targets[i]);
  }
}

CodePen

---

Помните , что строки начинаются с нуля ...
Обратите внимание на то, что вышеупомянутые индексы строк после sort (поэтому он отражает порядок, отображаемый в данный момент для пользователя, а не порядок, указанный в Datatables из разметки или из Ajax.) Это означает, что сортировка должна быть такой же, как когда пользователь щелкает строки (таким образом сохраняются индексы). Что может быть проблемой ...;)