Data table with json array

Question

I want to create a datatable using a JSON array, and its work fine but my problem is I want to change the last column value with a custome value. How to solve this problem?

This is my code.

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

What is val here. Can you show output of val?

CodeThing
– CodeThing

2018-09-11 04:47:00 +00:00
Commented Sep 11, 2018 at 4:47 — CodeThing
– CodeThing, Commented Sep 11, 2018 at 4:47
@CodeThing : I updated the question with value of val

JIJOMON K.A
– JIJOMON K.A

2018-09-11 04:49:14 +00:00
Commented Sep 11, 2018 at 4:49 — JIJOMON K.A
– JIJOMON K.A, Commented Sep 11, 2018 at 4:49

CodeThing · Accepted Answer · 2018-09-11 06:03:14Z

1

You can loop through your val variable and then change Action value.

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

To Add some style to particular row, we can do something like the below. I don't know if its a proper way or not, but this should do a trick

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

This should apply called called highlight to the row which is having less than call time.

edited Sep 11, 2018 at 6:03

answered Sep 11, 2018 at 4:56

CodeThing

2,7992 gold badges16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JIJOMON K.A Over a year ago

Thanks, its working. and one more doubt, how to add style in specific rows ? for example value of CallDuration is 0 then I want to add some style into that row.

Diwa · Accepted Answer · 2018-09-11 04:52:35Z

0

You can make use of ColumnDef property

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

Please refer the link https://datatables.net/reference/option/columns.data

answered Sep 11, 2018 at 4:52

Diwa

731 silver badge7 bronze badges

Collectives™ on Stack Overflow

Data table with json array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related