Question

我正在尝试使用jQuery DataTables来显示票证行，每行都是一张新票证，每张票证都有不同的单元格：

客户端
状态
优先级
主题
日期

默认情况下，表中的行显然如下所示

Client      Status      Priority     Subject     Date

但是，行的最终布局是：

Client                      Status      Priority

Subject                                     Date

我已经使用下面的代码将每个单元格组合到相同的（第一个）单元格中，以便实现所需的布局。但它似乎不是正确的解决方案。

    "columnDefs": [
    {

        "render": function ( data, type, row ) {
            return data +' '+ row[1]+' '+ row[2]+' '+ row[3]+' '+ row[4]+' '+ row[5];

        },
        "targets": 0
    },

    { "visible": false, "targets": [ 1,2,3,4,5 ]}

    ],

使用jQuery DataTables可以实现这种操作吗？

Answer 1

这应该有效：

var table = $('#example').DataTable({
    columns: [
        {
            "render": function(data, type, row){
                return row[0] + "<br/>" + row[3];
            }
        },
        null,
        {
            "render": function(data, type, row){
                return row[2] + "<br/>" + row[4];
            }
        },
        {
            "visible": false
        },
        {
            "visible": false
        }
    ]
});

请记住改变你的thead：

<thead>
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Position</th>
    </tr>
        <th>Office</th>
        <th colspan="2">Salary</th>
    </tr>
</thead>

JSFiddle上的工作示例。如果你启用它，你也需要设计样式并考虑订购。列名与您的名称不匹配，但结构相同。希望有所帮助。

数据表 - 细胞操作

1 个答案: