CODEWITHSUNDEEP
asp.net-mvc-4datatables
ksg
ksg

Reputation: 4067

JQuery DataTable-Access rowdata in render function with ajax datasource getting undefined?

I have a list of employees which is displayed using jquery datatables with edit and delete button in it.On clicking deleting delete button I want to show a popup message along with the name of the employee to be deleted?

For that i have tried to set data-name=row[1] to the delete buttom . But I am getting data-name=undefined

How can I access the name of the employee in the deletebutton?

DataTable code is

table = $(".dTable").dataTable({

    "ajax": {
        "url": url,
        "method": "GET",
        "dataType": "json"
    },

    columns: [
        { "data": "SlNo" },
        { "data": "Name" },
        { "data": "Duration" },
        { "data": "SingleFee" },
        { "data": "InstalmentFee" },
        { "data": "Id" }

    ],

    //Defining checkbox in columns
    "aoColumnDefs": [
        {
            "targets": [0],
            "bSortable": false
        },
        {
            "targets": 2,
            "bSortable": false
        },
        {
            "targets": 5,
            "bSortable": false,
            "render": function (data, type, row) {
                return '<div id="test">' +
                            '<div class="col-sm-4">' +
                                '<a class="btn btn-info editData"  data-id=' + data + '  >' +
                                '<i class="fa fa-edit"></i></a>' +
                            '</div>' +
                            '<div class="col-sm-4">' +
                                //Delete button//
                                '<a class="btn btn-danger deleteData" data-id=' + data + 'data-name=' + row[1] + ' >' +
                                '<i class="fa fa-close"></i></a>' +
                            '</div>' +
                           ' <div class="pull-right spinner col-sm-4"  style="display:none" >' +
                                '<i class="fa fa-refresh fa-spin spin-small "></i>' +
                            '</div>' +
                        '</div>'
            }
        }

    ]
});

Upvotes: 2

Views: 699

Answers (1)

davidkonrad
davidkonrad

Reputation: 85528

When you have a JSON array of items as data source, the name is retrieved by row.name. row is simply the current JSON item / object from the array.

Also you should remember to put data attributes (or attributes in general) into qoutes, '' or "". data-id=' + data + 'data-name=' + row[1] + ' >' would fail even if row[1] were holding the name :

return '<div id="test">' +
          '<div class="col-sm-4">' +
              '<a class="btn btn-info editData" data-id="' + data + '">' +
              '<i class="fa fa-edit"></i></a>' +
          '</div>' +
          '<div class="col-sm-4">' +
              //Delete button//
              '<a class="btn btn-danger deleteData" data-id="' + data + '" data-name="' + row.name + '">' +
              '<i class="fa fa-close"></i></a>' +
          '</div>' +
          '<div class="pull-right spinner col-sm-4" style="display:none" >' +
              '<i class="fa fa-refresh fa-spin spin-small"></i>' +
          '</div>' +
      '</div>'

Upvotes: 2

Related Questions