How to get selected table cell value in datatable

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 tablets, 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 initialization 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" } }); }); 

CHANGE FORM FOR 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 go to my controller ('Department / Edit /' + departmentid)

My observations 1) var aData = oDepartmentTable.fnGetData(this) always shows "unavailable" in the chrome console.

2) var departmentid = $(this).parent().parent().parent().parent().parent().children()[0].innerHTML gets the correct department ID if I use "bVisible": true in datatable initialization.

(3) I do not want to show departmentID to the end user. if I do "bVisible": false in datatable initialization then

var departmentid = $(this).parent().parent().parent().parent().parent().children()[0].innerHTML returns the name of the department

thanks

Answer 1

Check out the discussion on the datatables forum here and fnGetPosition

Instead, try this clicker:

 $(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) { //.. //.. }); }); 

This works for me. However, not quite as the documents say. Also, I first tried datatables 1.9.1 with the data - it didn't work at all. Guess that there were some bugs in this data area, and they were reworked over versions.