Таблица данных с массивом json

Question

Я хочу создать таблицу данных с использованием массива 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 }
        ]
    });

Answer 1

Вы можете перебрать переменную val и затем изменить значение действия.

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 к строке, в которой время вызова меньше.

Answer 2

Вы можете использовать свойство ColumnDef

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

Пожалуйста, перейдите по ссылке https://datatables.net/reference/option/columns.data