如何獲取數據表中選定的表單元格值

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" 
       } 

      }); 

     }); 

編輯表單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的傳遞給我的控制器（ '部門/編輯/' + DepartmentID的）

我的意見 1）var aData = oDepartmentTable.fnGetData(this)始終顯示在控制檯鉻 「不可用」。

2）var departmentid = $(this).parent().parent().parent().parent().parent().children()[0].innerHTML如果我在數據表初始化中使用「bVisible」：true，則獲取正確的departmentID。

（3）我不想將departmentID顯示給最終用戶。如果我做 「bVisible」：假DataTable中初始化，然後

var departmentid = $(this).parent().parent().parent().parent().parent().children()[0].innerHTML返回DEPARTMENTNAME

感謝

Answer 1

看在數據表論壇討論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) { 
     //.. 
     //.. 
    }); 
}); 

它適用於我。但是，不像文檔所說的那樣。此外，我第一次嘗試使用數據表1.9.1 - 它根本沒有工作。猜測這個數據表的區域有一些錯誤，並且在這些版本上進行了重構。