How to get the selected Table cell value in datatable - asp.net-mvc

Question

I am using jquery-2.0.3.min.js, bootstrap.min.js, jquery-ui-1.10.3.min.js, DataTables-1.9.4 with tabletools, datatables.net/blog/Twitter_Bootstrap_2
My View
<div id="windowDepartment" title="Departments"></div>
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered table-hover table-condensed" id="DepartmentTable">
<thead>
<tr>
<th>departmentID</th>
<th>departmentName</th>
<th>description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Datatable initialisation Script
$(document).ready(function () {
oDepartmentTable = $('#DepartmentTable').dataTable(
{
"sDom": "T<'clear'>lfrtip",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bServerSide": true,
"sAjaxSource": "Department/AjaxList",
"aaSorting": [[2, 'asc'], [3, 'asc']],
"aoColumns": [
{ "mDataProp": "departmentID", "sType": "string", "bVisible": false, "bSearchable": false },
{ "mDataProp": "departmentName", "sType": "string", "bVisible": true, "bSearchable": true },
{ "mDataProp": "description", "sType": "string", "bVisible": true, "bSearchable": true },
{ "mDataProp": null,"bSearchable": false,
"sDefaultContent": '<div class="btn-group"><a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#"><span class="icon-circle-arrow-down"></span></a><ul class="dropdown-menu"><li><a class="editDepartment"> <i class="icon-pencil"></i> Edit</a></li><li><a class="deleteDepartment"> <i class="icon-trash"></i> Delete</a></li></ul></div>'
}
],
"oTableTools": {
"sSwfPath": "/Content/DataTables-1.9.4/extras/TableTools/media/swf/copy_csv_xls_pdf.swf"
}
});
});
EDIT FORM SCRIPT
$(document).ready(function () {
$('#DepartmentTable tbody').on('click', 'a.editDepartment', function (e) {
e.preventDefault();
//1. Dose not work shows "not available"
var aData = oDepartmentTable.fnGetData(this)
//2. Gets the correct ID if "bVisilble=true"
var departmentid = $(this).parent().parent().parent().parent().parent().children()[0].innerHTML ;
//goto Edit Controller. DepartmentID is required here
$.get('Department/Edit/' + departmentid , function (data) {
$('div#windowDepartment').html(data);
//Open Dialog box
$("#windowDepartment").dialog().dialog({
resizable: true,
height: 500,
width: 500,
modal: true,
buttons:
{
Edit: function () {
editDepartment(); //Saves the data. Works fine
}, // end ok button
Cancel: function () {
$(this).dialog("close");
}
}, //end buttons
close: function () {
$(this).dialog("close");
}
}); //end modal edit
});
});
});
My Problem. (in EDIT FORM SCRIPT)
I need the DepartmentID to pass to my controller ('Department/Edit/' + departmentid)
My observations
1) var aData = oDepartmentTable.fnGetData(this) always shows "not available" in chrome console.
2) var departmentid = $(this).parent().parent().parent().parent().parent().children()[0].innerHTML gets the correct departmentID if i use "bVisible": true in datatable initialisation.
(3) I dont want to show departmentID to the end user. if i make "bVisible": false in datatable initialisation then
var departmentid = $(this).parent().parent().parent().parent().parent().children()[0].innerHTML returns the departmentName
Thanks

Answer 1

Look at the discussion in the datatables forum here and fnGetPosition
Try this clickhandler instead :
$(document).ready(function () {
$('#DepartmentTable tbody tr').on('click', function (e) {
// get the position of the current data from the node
var aPos = oDepartmentTable.fnGetPosition( this );
// get the data array
var aData = oDepartmentTable.fnGetData( aPos[0] );
// get departmentID for the row
var departmentID = aData[aPos].departmentID;
console.log(departmentID);
// ... do your stuff here, eg
//goto Edit Controller. DepartmentID is required here
//$.get('Department/Edit/' + departmentid , function (data) {
//..
//..
});
});
It works for me. However, not quite as the docs says. Also, I first tried out with datatables 1.9.1 - it didnt work at all. Guess this area of datatables have had some bugs and have been refactored over the versions.