时间戳

首页 > 解决方案 > 带有json数组的数据表

javascript - 带有json数组的数据表

问题描述

我想使用 JSON 数组创建一个数据表，它工作正常，但我的问题是我想用自定义值更改最后一列的值。如何解决这个问题呢？

这是我的代码。

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

标签： javascriptjqueryjsondatatable

解决方案

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

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

这应该适用highlight于调用时间少于调用时间的行。

推荐阅读