How to get row values in Jquery Datatable Render?

Question

Hello guys I am stuck on something I have to get the values of the whole row of data table, as far I am getting id but not getting whole row object

this is where I am

var table = $('.dtPrimaryBottom').DataTable({
    // dom: "Bfrtip",
    "lengthMenu": [[6], [7]],
    paging: true,

    columns:[
       { title: 'Student ID', data: 'stu_ID', visible:false},

        { title: 'Registration No', data: 'Registration No' , 'searchable':true},
        { title: 'Name', data: 'Name' },
        { title: 'FathersName', data: 'FathersName' },
        { title: 'Class', data: 'Class' },
        { title: 'Section', data: 'Section' },
        {
            //"title": "Actions",
            //"mdata": null,
            //"render": function (data, type, row) {
            //    return '<button class="btnID">Edit</button>';

            //"mData": null,
            //"bSortable": false,
            //"mRender": function (stu_ID) { return '<input id="btnDispose" type="button" onclick="myfunction(' + stu_ID +')" value="Edit" />'; }
            title:'Actions',
            'data': 'stu_ID',
            'render': function (data, type, row) {
                debugger;
                var id = $(this).data('stu_ID');

               // console.log(data);
                return '<input id="btnEdit" type="button" class="btn btn-warning" onclick="myfunction(' + data + ')" value="Edit" />  <input id="btnDelete" type="button" class="btn btn-danger" onclick="myfunction(' + data + ')" value="Delete" />';
            }                  
        }               
    ],    
    data: JsonData
});

on my onclick function when I write data I get the id but when I try to pass the whole row to my function it does not get hit

function myfunction(data) {
    debugger;
    var stid = row.stu_ID;
    var regNo = row



    alert(stu_ID);
}

how to pass whole row values when clicking on edit button?

Answer 1

You are specifying explicitly to pass only one value in data object :

'data': 'stu_ID'

So, you need to remove this property if you want to pass complete object to render function.

Change your code to :

'data' : null

or just simply remove this property, as default it would pass complete object then.

title:'Actions',
'render': function (data, type, row) {
            debugger;
            console.log(data); // you should in console  object now
            return '<input id="btnEdit" type="button" class="btn btn-warning" onclick="myfunction(' + data + ')" value="Edit" />  <input id="btnDelete" type="button" class="btn btn-danger" onclick="myfunction(' + data + ')" value="Delete" />';
        }  

Now you can access it in function down:

function myfunction(data) {
    debugger;
    var stid = data.stu_ID;
}

You can read more in detail about how to use render function here:

https://datatables.net/reference/option/columns.render

Answer 2

You can use the following way to render data. I have always rendered data in serverside processing the following way :

var table= $('.dtPrimaryBottom').DataTable( {

        "serverSide": true,
        "destroy" :true,
         "lengthMenu": [[6], [7]],
        "ajax": {
            "url": '/reports/getTopPerformerReport',
        },

        "columns": [


            { "data": "stu_ID" },
            { "data": "Registration No", },
            { "data": "Name" },
            { "data": "FathersName" },
            { "data": "Class" },
            { "data": "Section" },
            { "data": "stu_ID",
              "render": function ( data, type, full, meta ) {
                  return "<img src=\"http://test.com/"+data+"\" style=\"max-width:150px;\">";

              }
            },
        ]

});

Hope it helps.