Question

我有一个由JSON返回提供支持的jQuery DataTable，它有详细信息，点击该行并展开从我的JSON加载列表的详细信息模板，为此我跟着example。

我想知道如何在不隐藏它的情况下加载细节，就像它是数据表行的序列一样，无法选择展开和折叠，细节必须始终可见

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

它的工作方式是，每行技术上都有细节+正常细胞。

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

最后，对于细节行，我给出了一个属性colspan的单元格数量。允许它占据行的所有宽度。

我没有测试过它所以gl＆amp; hf;）如果你有任何麻烦，请不要犹豫。

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

Jquery数据表提供详细信息

1 个答案: