Как получить выбранное значение ячейки таблицы в datatable

Question

Я использую jquery-2.0.3.min.js, bootstrap.min.js, jquery-ui-1.10.3.min.js, DataTables-1.9.4 с tabletools, datatables.net/blog/Twitter_Bootstrap_2

мой взгляд

<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 инициализации сценария

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

Моя проблема. (В форме редактирования SCRIPT)

мне нужно DepartmentID перейти на мой контроллер ('Отдел/Edit /' + DepartmentID)

Мои наблюдения 1) var aData = oDepartmentTable.fnGetData(this) всегда показывает "не доступен" в хромированной консоли.

2) var departmentid = $(this).parent().parent().parent().parent().parent().children()[0].innerHTML получает правильный идентификатор отдела, если я использую «bVisible»: true в инициализации с возможностью ввода данных.

(3) Я не хочу показать departmentID конечному пользователю. если я сделать "bVisible" ложь в DataTable инициализации затем

var departmentid = $(this).parent().parent().parent().parent().parent().children()[0].innerHTML возвращает departmentName

Благодаря

Answer 1

Посмотрите на обсуждение в форуме DataTables here и fnGetPosition

Попробуйте clickhandler вместо:

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

Это работает для меня. Однако не совсем так, как говорится в документах. Кроме того, я впервые попробовал с данными datatables 1.9.1 - он вообще не работал. Угадайте, что в этой области данных данных были некоторые ошибки, и они были переработаны над версиями.