Jquery 数据表显示详细信息

Question

我有一个由具有详细信息的 JSON 返回驱动的 jQuery DataTable，它单击行并展开从我的 JSON 加载列表的详细信息模板，为此我遵循 example。

我想知道如何在不隐藏的情况下加载detail，就好像它是datatable行的序列一样，不能有展开和折叠的选项，detail必须始终可见

Column1| Column2| Column3|
Value1   Value2   Value3
  Detail1| Detail2| Detail3|
  ValueD1   ValueD2   ValueD3 

更新 - JSON

$scope.list = [
            {
                id:1,
                name: "Ze",
                listDetail: [
                    {
                        id:1,
                        description: "lt"
                    },
                    {
                        id:2,
                        description: "lt 3"
                    },
                ]
            },
            {
                id:2,
                name: "Ze 2",
                listDetail: [
                    {
                        id:3,
                        description: "lt 1"
                    },
                    {
                        id:4,
                        description: "lt 4"
                    },
                ]
            }
        ];

Answer 1

在这里，它应该可以工作：

这里是一个应该使用这样的 JSON 的解决方案：

• json

{ "draw": 2, "recordsTotal": 3, "recordsFiltered": 3, "data": [{ "type": "normal", "description": "Zenaida", "name": "Frank", "age": "Software Engineer", "location": "New York" }, { "type": "detail", "detail": "first detail" }, { "type": "detail", "detail": "second detail" }, { "type": "detail", "detail": "third detail" }, { "type": "normal", "description": "zerrz", "name": "paul", "age": "Software breaker", "location": "Lodon" }, { "type": "detail", "detail": "third detail" }, { "type": "normal", "description": "Zenaida", "name": "Frank", "age": "Software Engineer", "location": "New York" }, { "type": "detail", "detail": "second detail" }, { "type": "detail", "detail": "third detail" }] }

• js

$('#example').dataTable({ "processing": true, "serverSide": true, "ajax": "YourAjaxSource", "columns": [ //You have to manually bind your column since the first value is not to be displayed { "data": "details" }, { "data": "description" }, { "data": "name" }, { "data": "age" }, { "data": "location" } ], "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { switch (aData[0]) { //first value indicates if its a detail row or a normal row case 'normal': // if its a normal row, just display the cells without the first detail one $(nRow).find('td')[0].style.display = 'none'; break; case 'detail': //else display none of the cells except the detail one with take up 5 cells $(nRow).find('td')[1].style.display = 'none'; $(nRow).find('td')[2].style.display = 'none'; $(nRow).find('td')[3].style.display = 'none'; $(nRow).find('td')[4].style.display = 'none'; $(nRow).find('td')[0].colSpan = '5'; //Your number of column break; } } });

它的工作方式是，从技术上讲，每一行都有细节 + 正常单元格。

绘制时检查每一行的行类型，并仅显示所需的单元格（因为其他单元格是空的）

最后对于detail行我给了一个属性colspan的单元格数来允许它取行的所有宽度。

我还没有测试过，所以 gl&hf ;) 如果您有任何问题，请随时发表评论。

并根据您的需要进行调整。