how to get the row data in data table

Question

I am in a situation, I am trying to get the specific row's data from data table. I am new to dataTable.

so here is the situation,
bellow is my data table content show in the picture.

bellow is the code for my Data Table

 $(document).ready(function() { var table =$('#example').dataTable({ "processing": true, "ajax": { "url":'/myWeb/Controller/getUserList', "dataSrc":"" }, "columns": [ { "data": "userName"}, { "data": "roles" }, { data: "userName", render: function ( data, type, row ) { if ( type === 'display' ) { return '<button type="button" id='+data+' class="btn btn-default btn-sm" data-toggle="modal" data-target="#editUser" data-whatever="@getbootstrap()" onclick="getUserName(this.id)" > <span class="glyphicon glyphicon-pencil"></span> Edit </button>'; } //alert(data); return data; } }, { data : "userName", if ( type === 'display' ) { return '<button type="button" id='+data+' class="btn btn-default btn-sm" onclick="countUserRecord(this.id)"> <span class="glyphicon glyphicon-trash"></span> Delete </button>'; } //alert(data); return data; } } ], "paging": false, "info": false, "filter": false, "sort": false }); } ); 

On the delete button as I am passing userName,I want pass role also, so i tried this

 role = row.roles; userName = row.userName; status = row.status; alert("username :"+userName+" role: "+role); 

but When I do this I am getting different role for each user. It is giving me wrong user's role.

bellow is my Json structure Which I am getting from DB.

 [ {"userName":"admin", "password":null, "roles":"Admin", "status":"Active", "email":"emailAdmin"}, {"userName":"varun", "password":null, "roles":"User", "status":"Active", "email":"emailVarun"}, {"userName":"bob", "password":null, "roles":"Admin", "status":"Active", "email":"undefined"} ] 

What I want to do is When I click on delete user button , it should pass userName and role also, how do I do this,

Answer 1

This should do the trick:

$('table').on('click','.addDeleteClassToDeleteBtns',function(){
     var containerRow = $(this).parents('tr');
     var userName    = containerRow.find('td:first-child').html();
     var role         = containerRow.find('td:nth-child(2)').html();
     alert(role+' '+userName);
});

or

function countUserRecord(deleteId){
     var containerRow = $('#deleteId').parents('tr');
     var userName    = containerRow.find('td:first-child').html();
     var role         = containerRow.find('td:nth-child(2)').html();
     alert(role+' '+userName);
}

You could edit the selectors to better suit your code.