row().child() добавляет неуказанный HTML в 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 содержит текст «abc 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>

Результатом вышеизложенного будет то, что текст «abc 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, которую я ожидаю использовать.


html jquery datatables
person Andy    schedule 06.02.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Предоставленная вами ссылка на таблицы данных описывает это.

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

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

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

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

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

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

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

Вы передаете строку, поэтому она переносит эту строку в 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) и т. д., чтобы добавить нужные ячейки и значение ответа (тогда как строка, проанализированная jquery, сделает это за вас).

person freedomn-m    schedule 06.02.2020