数据表：显示子行的摘要行答案

【问题标题】：Datatables: Showing a summary row for sub rows数据表：显示子行的摘要行
【发布时间】：2013-03-23 09:54:44
【问题描述】：

我是数据表的新手...

我正在制作一个行网格，每个行都有子（详细信息）行。我正在使用来自 mysql 数据库的服务器端数据。它以包含所有子行的 JSON 形式返回。我需要创建“主”网格行，总结子行中的列。我不确定 Datatables 是否可以做到这一点或如何做到......

我正在考虑从在 JQuery 函数中获取 JSON 开始。然后使用循环来总结我需要的数据并将其作为数组数据传递给网格。最后我渲染了网格。

这是最佳实践还是 Datatables 能够以更智能的方式做到这一点？

--子行的概念可以看这里：http://datatables.net/blog/Drill-down_rows--

【问题讨论】：

不清楚你的子行是什么意思，你能发布你的代码吗？我知道你不需要循环它。
子行是指“详细信息行”或“向下钻取”行。这是我想要的概念：datatables.net/blog/Drill-down_rows 抱歉，我还没有任何代码要发布...

标签： jquery-datatables

【解决方案1】：

我已经完成了这样的事情。我返回了我需要的所有数据，并将“详细信息”信息放入隐藏 div 的最后一列。然后使用行点击将该信息放入详细信息行。

//In the example the table the first column has a plus icon that gets replace with a minus icon
// the last column added a hidden div that contained the details.
$("#results").dataTable({
    "fnCreatedRow": function (nRow, aData, iDataIndex) {
        //Attach the on click event to the row
        var oTable = this;
        $("td:eq(0) span", nRow).on("click", function () {
            //First column has a image with the jQuery UI plus icon
            if ($(this).hasClass("ui-icon-circle-plus")) {
                //The details information is stored in the last column in a hidden div with the class wrapper
                //Grab the hidden information and append that to the new row.
                oTable.fnOpen(nRow, $(".wraper", nRow).html(), "details");
            } else {
                oTable.fnClose(nRow);
            }
            $(this).toggleClass("ui-icon-circle-plus ui-icon-circle-minus");
        });
    }
});

【讨论】：