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

是否可以让DataTables中的行详细信息显示以下数据，但与父列对齐？我注意到，当我将行详细信息与

row.child（format（row.data（））.show（）一起使用时

这将创建另一个

，但它也将添加一个

，我不希望发生这种情况

这是使用

row.child（）时创建的行。

：

2016年1月12日客户端名称项目名称任务名称

我还附上了下面的图片，显示我希望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>';
    }

if（row.child.isShown（））{
//此行已打开-关闭它
row.child.hide（）；
tr.removeClass（“显示”）；
}否则{
//打开这一排
row.child（格式（row.data（））.show（）；
tr.addClass（“显示”）；
}
函数格式（d）{
//`d`是该行的原始数据对象
返回“”+
''+
''+
“2016年1月12日”+
“客户名称”+
“项目名称”+
“任务名”+
'';
}

虽然我不确定如何使列对齐，但DataTables网站确实有这样一个例子。它们使子行变成多行，列标题作为第一列。例子是。因为父行中似乎只有几列，所以这可能适合您。DataTables示例仅显示了3行作为子行，但很容易修改为包含问题中显示的所有4列。

我的方法是：

创建临时表行：

tmpRow=table.row.add（data.draw（）.node（）

克隆临时行的节点：

childNode=$（tmpRow）.clone（true）

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

row.child（childNode.show（）

删除临时表行：

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

};

---

不久前我也有同样的问题，但几年后我发现这里仍然没有正确的答案

只需使用与父行相同数量的表单元格创建表行，并以“数组”形式返回即可-请参见以下内容：

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

函数格式（d）{
var childRow=''+
'' +
'' +
“2016年1月12日”+
“客户名称”+
“项目名称”+
“任务名”+
'';
返回$（childRow.toArray（）；
}

best solutions available here@ArfanMirza这些解决方案都不能解决OP在该线程中的问题，他需要子行中的所有可见列都具有与表相同的响应性，以便轻松地获取数据viewed@ArfanMirza此解决方案是迄今为止两个线程中给出的最佳解决方案。其他答案只是改写了官方文件。文档说子行与父行没有关系，所以我们遇到的问题是无法创建将列与父行匹配的子行，这包括表的响应性。如果有人调整窗口大小，这对于可视化数据非常重要。在这个解决方案中，他克隆了上面的行，并将其作为新数据的子行追加，这解决了所有问题，您甚至可以隐藏列并保留样式。

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