行（）。child（）正在数据表中添加未指定的HTML

Question

使用DataTables 1.10。18

我正在尝试使用。行（）。child（）方法，如文档中所述(https://datatables.net/reference/api/row（）.child（））将子行添加到表中。

我在serverSide模式下使用DataTables，但是我的表的一行的呈现标记如下所示：

<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，它处理通过呈现的“plus”图标的点击。fa plus类在上面的标记中。这是一个很棒的“加号”图标。详情如下:

$('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');
    }
});

这将扩展行，显示消息加载然后对单击图标的href属性进行ajax调用，在本例中为/get-data.json。这个ajax调用的目的是获取要在子行中显示的数据。它还将FontAw0013图标切换为“减号”，以指示子行可见（展开行）。

到目前为止，所有这些都有效。

我遇到的问题是这一行：

row.child(response).show();

这在显示子行的意义上起作用。但是行占据了表的全部宽度，在本例中，表有5列。假设ajax响应包含文本“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>

...这不是我想要的。

它正在包装一个

我不知道如何修复此问题，或指定我不希望使用该




Answer 1

您提供的datatables链接对此进行了描述。

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解析字符串为您做这件事）。