row (). child () добавляет неопределенные HTML в DataTables

Question

Использование DataTables 1.10.18.

Я пытаюсь использовать метод .row().child(), как описано в документации (https://datatables.net/reference/api/row (). Child () ), чтобы добавить дочерняя строка таблицы.

Я использую DataTables в режиме serverSide, но визуализированная разметка для строки моей таблицы выглядит следующим образом:

<tbody>
    <tr>
        <td><a class="expand-row" href="/get-data.json"> <i class="fa-plus"></i> </a></td>
        <td>Foo</td>
        <td>Bar</td>
        <td>Baz</td>
        <td>2020-02-02</td>
    </tr>
</tbody>

Я написал js, который обрабатывает нажатие на значок «плюс», который отображается с помощью класса .fa-plus в разметке выше. Это FontAwesome значок «плюс». js выглядит следующим образом:

$('table tbody').on('click', '.expand-row', function (e) {
    e.preventDefault();

    var tr = $(this).closest('tr');
    var row = $(this).closest('table').DataTable().row(tr);

    if (row.child.isShown()) {
        row.child.hide();
        tr.removeClass('active');
        $(this).find('i').toggleClass('fa-minus fa-plus');
    } else {
        row.child('Loading...').show();

        // Ajax request to get child row data
        $.get($(this).attr('href')).done(function(response) {
            // Add the child row data to the table and show it
            row.child(response).show();
        });

        tr.addClass('active');
        $(this).find('i').toggleClass('fa-plus fa-minus');
    }
});

Это расширяет строку, показывает сообщение «Загрузка ...», а затем выполняет ajax вызов атрибута href значка, по которому щелкают, что в этом примере это /get-data.json. Цель этого вызова ajax - получить данные, которые должны отображаться в дочерней строке. Он также переключает значок FontAwesome на «минус», чтобы указать, что дочерняя строка видима (расширенная строка).

Пока все это работает.

У меня проблема со строкой:

row.child(response).show();

Это работает в том смысле, что показывает дочернюю строку , Но строка занимает всю ширину таблицы, которая в этом случае имеет 5 столбцов. Предполагая, что ajax response содержал текст «ab c 123», визуализированная разметка выглядит так:

<tr>
    <td colspan="5">
        abc 123
    </td>
</tr>

colspan="5" автоматически добавляется DataTables, потому что согласно связанным документам:

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

В моем случае я хочу, чтобы разметка была такой:

<tr>
    <td></td>
    <td></td>
    <td colspan="2">
        abc 123
    </td>
    <td></td>
</tr>

В результате вышесказанного текст "ab c 123" появится под заголовками 3-го и 4-го столбцов потому что он начинается в 3-м столбце и имеет colspan="2", то есть до 4-го столбца.

Я пробовал это на основе документов:

row.child(
        '<tr>' +
        '<td></td>' +
        '<td></td>' +
        '<td colspan="2">' +
        response +
        '</td>' +
        '<td></td>' +
    '</tr>'
).show();

Но это выглядит как ...

<tr>
    <td colspan="5">
        <tr>
            <td></td>
            <td></td>
            <td colspan="2">abc 123</p>
            <td></td>
        </tr>
    </td>
</tr>

... это не то, что я хочу.

Оборачивает <tr><td colspan="5"> ... </td></tr> вокруг того, что я указал, что означает, что оно не воспроизводится так, как я хочу.

Я не знаю, как это исправить или указать, что я не ' не хочу этого <td colspan="5">. Кажется, что DataTables добавляет это автоматически, хотя я указал точную строку HTML, которую я ожидаю использовать.

Answer 1

Ссылка datatables, которую вы предоставили, описывает это.

https://datatables.net/reference/api/row (). Child ()

row().child( data [, className ] )

Данные, отображаемые в дочерней строке, могут быть заданы несколькими различными способами:

• строка - как строка создается отдельная дочерняя строка, и данные вставляются в одну ячейку в этой дочерней строке.

• узел - в качестве элемента tr элемент tr используется в качестве дочерней строки. Это может быть полезно, если вы sh определите несколько столбцов в дочерней строке.

• jQuery - Объект jQuery с добавляемыми узлами. Если в наборе результатов jQuery есть несколько элементов, они добавляются в виде нескольких строк. Если узел является элементом tr, он обрабатывается дочерней строкой, в противном случае строка и ячейка создаются автоматически, и в нее вставляется узел из результирующего набора jQuery.

• array - Несколько дочерних строк могут быть добавлены одновременно, передавая любой из вышеперечисленных параметров в виде массива. Например, вы можете передать массив с двумя строковыми элементами, чтобы создать две дочерние строки с содержимым строки, используемым для каждой.

Вы передаете строку, поэтому он оборачивает эту строку в colspan tr

Вы можете исправить это, передав объект jquery, чтобы он не обернул его в свой собственный tr:

var tr = $("<tr><td></td><td></td><td colspan='2'>" + response + "</td><td></td>");
row.child(tr).show();

---

Вы упоминаете:

также возможно передать элемент tr

это второй вариант выше, когда вы передаете в узле DOM (tr элемент ), а не tr внутри строки. Возможно, что-то вроде:

var tr = document.createElement("tr");
row.child(tr).show();

, но вышеприведенному tr потребуется дополнительная работа для createElement ("td") et c для добавления нужных ячеек и значения ответа (тогда как jquery проанализированная строка делает это для вас).