带有JSON数组的数据表

时间:2018-09-11 04:44:40

标签: javascript jquery json datatable

我想使用JSON数组创建一个数据表,它的工作正常,但是我的问题是我想用一个custome值更改最后一个列的值。如何解决这个问题?

这是我的代码。

    var val=[{"PhoneNumber":"9961196748","CallType":"Outgoing","DialedTime":"2018-09-11 09:39:52","ConnectedTime":"2018-09-11 09:40:12","DisconnectedTime":"2018-09-11 09:40:27","CallDuration":"0:35 minutes","CallSummary":"Dialled/Connected/Disconnected","Action":38},{"PhoneNumber":"9961196748","CallType":"Outgoing","DialedTime":"2018-09-11 10:06:57","ConnectedTime":"2018-09-11 10:07:15","DisconnectedTime":"2018-09-11 10:07:24","CallDuration":"0:27 minutes","CallSummary":"Dialled/Connected/Disconnected","Action":39}]
    var test='<button class="btn"  ><i class="fa fa-play"></i></button>';

    $('#datatable-individualreportmodal').DataTable ({
        "data" : val,
        "columns" : [
            { "data" : "PhoneNumber" },
            { "data" : "CallType" },
            { "data" : "DialedTime" },
            { "data" : "ConnectedTime" },
            { "data" : "DisconnectedTime" },
            { "data" : "CallDuration" },
            { "data" : "CallSummary" },
            { "data" : test }
        ]
    });

2 个答案:

答案 0 :(得分:1)

您可以遍历val变量,然后更改Action值。

no_show

要向特定行添加某种样式,我们可以执行以下操作。 我不知道它是否正确,但这应该可以解决问题

var test='<button class="btn"><i class="fa fa-play"></i></button>';

$.each(val, function(key, index) {
    index.Action = test;
});

//Parse and apply in datatable

$('#datatable-individualreportmodal').DataTable ({
        "data" : val,
        "columns" : [
            { "data" : "PhoneNumber" },
            { "data" : "CallType" },
            { "data" : "DialedTime" },
            { "data" : "ConnectedTime" },
            { "data" : "DisconnectedTime" },
            { "data" : "CallDuration" },
            { "data" : "CallSummary" },
            { "data" : "Action" }
        ]
    });

这应将称为$('#datatable-individualreportmodal').DataTable ({ "data" : val, "columns" : [ { "data" : "PhoneNumber" }, { "data" : "CallType" }, { "data" : "DialedTime" }, { "data" : "ConnectedTime" }, { "data" : "DisconnectedTime" }, { "data" : "CallDuration" }, { "data" : "CallSummary" }, { "data" : "Action" } ], "createdRow": function ( row, data, index ) { var callDuration = data.CallDuration.replace(':', '.'); callDuration = callDuration.replace(/[^0-9\.]/g, ''); if ( parseFloat(callDuration) <= 0 ) { $(row).addClass('highlight'); } } }); 的名称应用于少于调用时间的行。

答案 1 :(得分:0)

您可以使用ColumnDef属性

"columnDefs": [
                    {
                        "render": function (data, type, row) {
                            return data;
                        },
                        "targets": 0
                    },
]

请参考链接https://datatables.net/reference/option/columns.data