Render column function(data,type,full) on Jquery datatable with complex header not working

Question

I am new to jquery and trying to design a datatable from json response with complex header.

So far data is populated as per requirement but now I want to change some of the column data inside the same datatable based on the json data or based on other column data.

In a simple jquery datatable the facility of render columns with the use of function(data,type,full) was helpful to access other columns by writing full[columnIndex], but on complex header datatable its not working and giving undefined value.

Please help me and let me know what code should I write in order to get dynamic access to other columns of the datatable.

Here is my code :

$('#example').dataTable({
    "responsive": true,
    "aaData": data,
    "aoColumns": [{
            "sTitle": "EVENT ID",
            "defaultContent": "",
            "mData": "eventId",
            "render": function(val, type, full) {
                //alert("event id :: " + val + "  ::: " + full[0]+"  ::: "  );
                return '<td id=event>' + val + '</td>';
            }
        },
        { "mData": "ecid_1.ecid" },
        { "mData": "ecid_1.name" },
        { "mData": "ecid_1.address" },
        { "mData": "ecid_2.ecid" },
        { "mData": "ecid_2.name" },
        { "mData": "ecid_2.address" },
        {
            "sTitle": "EVENT DATE",
            "defaultContent": ""
        },
        {
            "defaultContent": "",
            "render": function(val, type, full) {
                var event = full[0];
                //data[0].eventId
                alert(event);
                if (val == "" || val == null) {
                    //alert('<input align="left" id="radio1" type="radio" name="action'+i+'" value="Approve">Approve</input><br/><input align="left" id="radio2" type="radio" name="action'+i+'" value="Reject">Reject</input>');
                    return '<input align="left" id="radio1" type="radio" name="action" value="Approve" onclick="updateEvent(&#39;' + event + '&#39;,&#39;' + full[1] + '&#39;,&#39;approve&#39;,&#39;' + full[4] + '&#39;,&#39;' + +'&#39;);">Approve</input><br/><input align="left" id="radio2" type="radio" name="action" value="Reject" onclick="updateEvent(&#39;' + event + '&#39;,&#39;' + full[1] + '&#39;,&#39;reject&#39;,&#39;' + full[4] + '&#39;,&#39;' + +'&#39;);">Reject</input>';
                } else {
                    return val;
                }
                //alert("action:::"+data);
            }
        },
        {
            "sTitle": "ACTION DATE",
            "defaultContent": ""
        },
        {
            "sTitle": "ACTION COMMENTS",
            "defaultContent": "",
            "render": function(data, type, full) {
                if (full[4] == "" || full[4] == null) {
                    //alert('<input align="left" id="radio1" type="radio" name="action'+i+'" value="Approve">Approve</input><br/><input align="left" id="radio2" type="radio" name="action'+i+'" value="Reject">Reject</input>');
                    return '<textarea  id="comment" type="text" name="comment" value"aaa"></textarea>';
                } else {
                    return '<textarea readonly style="background-color:#D3D3D3;"  id="comment" name="comment">' + data + '</textarea>';
                }
                //alert("action:::"+data);
            }
        },
        {
            "render": function(data, type, full) {
                var table = $('#example').DataTable();
                var rowIndex = $(this).closest('tr').index();
                //alert(full[2]);
                return '<a href="/MatchMergeAPI/jsp/details.jsp#someRoute?ecid1=' + full[1] + '&ecid2=' + full[2] + '&event=' + full[0] + '"><img src="/MatchMergeAPI/img/eventDetails.jpeg" alt="" style="width: 120px; height: 50px;" /></a>';
            }
        }
    ]
});

My datatable now looks like this:

Where you can see the ACTION column which is supposed to give a radio button as per render function but now giving array of data

Answer 1

Ok, so I found the solution too after many hit and trial. inside render function(data, type, full) we are getting the array of row data inside full, so to get any one of the column value we have to actually get it from the array using the key and the key is exact same as the json objects.

So If I want to get eventId in any of the other columns then code will go like this :

       function(data,type,full){
         var eventId = full['eventId'];
         return eventId;
        }