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

我的方法是：

创建临时表格行：

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

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

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

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

优点：

使用表列定义
没有额外的HTML代码（即format()）
最小代码
清洁，没有黑客

缺点：

表必须重绘临时节点才能让domNode传递给孩子
用户可能会遇到＆＃34; flash＆＃34;看到临时行一秒（和分页计数）

它干净且有效，您可以使用一些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();
}

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

3 个答案: