使用子行的父列的 DataTables 行详细信息

Question

是否可以让 DataTables 中的行详细信息在下方显示数据但与父列对齐？我注意到，当我将行详细信息与row.child( format(row.data()) ).show(); 一起使用时，这将创建另一个<tr>，但随后它也会添加一个我不希望发生的<td colspan>。

这是使用row.child()时创建的行：

<tr><td colspan="17"><tr><td></td><td></td><td>January 12, 2016</td><td>Clientname</td><td>Projectname</td><td>Taskname</td></tr></td></tr>

我还在下面附上了一张图片，显示我希望 2016 年 1 月 12 日与父 Date 列对齐，Clientname 与父 Client 列对齐等等......

有人知道怎么做吗？

这是我当前的行详细信息代码：

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }

function format ( d ) {
    // `d` is the original data object for the row
        return  '<tr>'+
                            '<td></td>'+
                            '<td></td>'+
                            '<td>January 12, 2016</td>'+
                            '<td>Clientname</td>'+
                            '<td>Projectname</td>'+
                            '<td>Taskname</td>'+
                        '</tr>';
    }

Answer 1

我的做法是：

1. 创建一个临时表行：

   tmpRow = table.row.add(data).draw().node();

2. 克隆临时行的节点：

   childNode = $(tmpRow).clone(true);

3. 使用克隆节点显示子节点：

   row.child(childNode).show();

4. 删除临时表行：

   table.row(tmpRow).remove().draw();

优点：

• 使用表列定义
• 没有额外的 HTML 代码（即format()）
• 最小代码
• 干净，没有黑客攻击

缺点：

• 表必须重绘临时节点才能将domNode 传递给子节点
• 用户可能会“一闪而过”地看到临时行一秒钟（以及分页计数）

它干净且有效，您可以使用一些 CSS 来缓解这些警告。

这里是完整的解决方案，带有文档演练：

/**
 * @description
 * Expands the parent row and reveals the child row.
 * In this example, data is simply copied from the parent row 
 * for illustration purposes, but in reality can be retrieved 
 * from a promise or nested object key.
 *
 * @param {event} row onclick event
 * @return {void}
 */
expandRow = function (e) {
    const data = e.data, // customize or load data from AJAX
        table = $('#myDatatable').DataTable(),
        tr = $(e.target).closest('tr'),
        row = table.row(tr);

    /**
     * @description
     * Hide the parent row
     */
    if ( row.child.isShown() ) {
        $(tr).removeClass('shown');
        row.child.hide();
    }
    /**
     * @description
     * Show the parent row
     */
    else {
        /**
         * @description
         * Draw a new row `tmpRow` in the table
         * and clone its dom node
         */
        const tmpRow = table.row.add(data).draw().node(),
            childNode = $(tmpRow).clone(true);

        /**
         * @description
         * Append the child to the parent row
         */
        row.child(childNode).show();
        $(tr).addClass('shown');

        /**
         * @description
         * Remove the `tmpRow` from the table
         */
        table.row(tmpRow).remove().draw();
    }

};

Answer 2

虽然我不确定如何使列排列，但 DataTables 网站确实有一个示例。它们使子行变成多行，列标题作为第一列。示例是here。由于看起来您的父行中只有几列，这可能对您有用。 DataTables 示例仅显示 3 行作为子项，但可以轻松修改为包含您在问题中显示的所有 4 列。

Answer 3

前段时间我也遇到过同样的问题，但几年后我发现这里仍然没有正确的答案。

只需创建具有与父行相同数量的表格单元格的表格行并作为“数组”返回 - 见下文：

function format(d) {
    var childRow = '<tr>' +
            '<td></td>' +
            '<td></td>' +
            '<td>January 12, 2016</td>' +
            '<td>Clientname</td>' +
            '<td>Projectname</td>' +
            '<td>Taskname</td>' +
            '</tr>';
    return $(childRow).toArray();
}