Get the data from datatable row with two buttons(view and edit) in each row and identify the button
Get the data from datatable row with two buttons(view and edit) in each row and identify the button
I'm new to datatable and have implemented datatable by going through the documentation. In my project, i'm using Spring, Jquery and datatable. After getting ajax response from Spring controller, i have implemented two button in each row. I need to know how to get the row data especially ID("mDataProp" : "id") and the button i clicked because i have two buttons in each row. I need to submit a form with value(ID) and button type, so that i can redirect to different pages with data based on the button click.
var dtResources = $("#id-dt-UserData").dataTable({
"processing": true,
"serverSide": true,
"bPaginate": true,
"iDisplayLength": 50,
"aLengthMenu": [[50, 100, 150, 200], [50, 100, 150, 200]],
"sPaginationType": "full_numbers",
"sAjaxSource": getContextPath() + "/controller/searchResult",
"oLanguage" : {
"sLengthMenu" : "MENU records per page",
"sSearch" : "<span class='add-on'><i class='fa fa-search'></i></span>Search Resource:",
"sZeroRecords" : "No matching records found",
"sProcessing" : "<img src='"+getContextPath()+"/resources/images/az_progress.gif'>"
},
"fnServerParams": function(aoData){
var status = $("#id-cmb-Status").val();
var searchName = $("id-txt-userName").val();
var qsData = JSON.stringify({name:searchName,status:status});
aoData.push({name: "searchQuery", value:qsData})
},
"fnServerData": function(sSource, aoData, fnCallback, oSettings) {
oSettings.jqXHR = $.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback,
"error": function(e) {
console.log(e.message);
}
});
},
"aoColumns": [
{"mDataProp": "name", "sTitle":"Name"},
{"mDataProp": "category", "sTitle":"Roles", "bSortable": false},
{"mDataProp": "status", "sTitle":"Status", "sWidth": "15px", "bSortable": false},
{"mDataProp" : "id", "sTitle":"Action", "bSortable": false,
"mRender": function ( data, type, full) {return "<button><i class='fa fa-search'></i></button> " +
"<button><i class='fa fa-edit'></i></button>";
}
}
]
});
$('#id-dt-Resources tbody').on('click', 'button', function(e){
//What is to be done to get the id and button type
});
Answers
http://jsbin.com/jibuci/edit?html,css,js,output is a working example