使用父列作为子行的 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 日与父日期列对齐，客户名称与父客户列对齐等等....

有人知道这样做的方法吗？

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

        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

虽然我不确定如何使列对齐，但 DataTables 网站确实有这方面的示例。他们使 child 行变成多行，第 headers 列作为第一列。例子是here。由于看起来您的 parent 行中只有几列，因此这可能对您有用。 DataTables 示例仅显示 3 行作为 children，但很容易修改它以包含您在问题中显示的所有 4 列。

Answer 2

我的做法是：

创建临时 table 行：

tmpRow = table.row.add(data).draw().node();
克隆临时行的节点：

childNode = $(tmpRow).clone(true);
使用克隆节点显示child:

row.child(childNode).show();
删除临时 table 行：

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

优点：

使用 table 列定义
没有额外的 HTML 代码（即 format()）
最少的代码
干净，没有黑客

缺点：

Table 必须重新绘制临时节点才能获得 domNode 传递给 child
用户可能会遇到 "flash" 看到临时行一秒钟（和分页计数）

它干净且有效，您可以通过一些 CSS 来减轻警告。

这是带有文档的完整解决方案 walk-through:

/**
 * @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 3

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

只需创建 table 行，其中 table 单元格数量与父行相同，return 作为“数组”- 见下文：

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

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

DataTables row details using parent columns for child row

javascript

jquery

datatables

datatables-1.10