0

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 }
        ]
    });
Improve this question
2
  • What is val here. Can you show output of val? Commented Sep 11, 2018 at 4:47
  • @CodeThing : I updated the question with value of val Commented Sep 11, 2018 at 4:49

2 Answers 2

Reset to default
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.

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

1 Comment

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.
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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.