首页 > 解决方案 > 基于 JSON 的数据表条件渲染行

问题描述

在我的 JSON 中,我有一个'Keys'包含数组的对象

"keys": [
    {
        "key": "...",
        "customer": "...",
        "externalUser": null,
        "name": "Administrator key 1",
        "privileges": 32,
        "partitionKey": "...",
        "rowKey": "...",
        "timestamp": "2018-11-02T03:51:27.4099037+00:00",
        "eTag": "W/\"datetime'2018-11-02T03%3A51%3A27.4099037Z'\""
    },
    {
        "key": "...",
        "customer": "...",
        "externalUser": null,
        "name": "Administrator key 2",
        "privileges": 32,
        "partitionKey": "...",
        "rowKey": "...",
        "timestamp": "2018-11-02T03:51:27.4159094+00:00",
        "eTag": "W/\"datetime'2018-11-02T03%3A51%3A27.4159094Z'\""
    }
]

我想要实现的只是在我的桌子上显示privileges等于的行。'32'

截至目前,我得到它的工作使用rowCallback

"rowCallback": function( row, data, index ) {
                if (data['privileges'] && data['privileges'] != '32') {
                    $(row).hide();
                }
            }

完整的功能在这里

function fetchKeysByCustomerId(customerId){
    var getKeysById = "https://..." + customerId;

        var tt = $('#apiAccessKeyTable').DataTable( {
            "ajax": {
                "url": getKeysById,
                "dataSrc": "keys"
            },
            "columns": [
                { "data": null },
                { "data": "name" },
                { "data": "key" },
                { "data": null },
                { "data": null }
            ],
            "columnDefs": [ 
                { "targets":0, "searchable": false, "orderable": false}          
            ],
            "order": [[ 1, 'desc' ]],
            'processing': true
        } );

        tt.on( 'order.dt search.dt', function () {
            tt.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                cell.innerHTML = i+1;
            } );
        } ).draw();
}   

但这并不理想,因为这些行只是被隐藏了。如果我对其他列进行排序,表的索引列就会混乱。

如何完全删除或仅渲染有条件的行?

标签: javascriptjquerydatatable

解决方案


推荐阅读