Question

我是Datatables的新手......

我正在创建一个行网格，每个行都有子（细节）行。我正在使用来自mysql数据库的服务器端数据。它作为包含所有子行的JSON返回。我需要创建“主”网格行，从子行中汇总列。我不确定Datatables是否可以这样做或者它是如何完成的......

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

这是最佳做法还是Datatables能够以更聪明的方式做到这一点？

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

Answer 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");
        });
    }
});

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

1 个答案: