クリックバインディングによるデータテーブルデータへのアクセス

Question

Jquery DataTables 1.7.6をJQuery 1.8.6で使用しています。私は1つの行にボタンを持つデータテーブルをセットアップし、そのボタンのクリックをキャプチャして別のテーブルに行を移動しようとしています。 DataTableのデータを取得して、追加機能と削除機能を呼び出す際に問題が発生しました。

<script type="text/javascript"> 
    $(document).ready(function() { 
     var eligibleCreatives = $('#EligibleCreativeTableId').dataTable({ 
      "bJQueryUI": true, 
      "bStateSave": true, 
      "bAutoWidth": false, 
      "aoColumnDefs": [ 
       { "bSortable": false, "aTargets": [0] }, 
       { "bVisible": false, "aTargets": [3] }, 
      ], 
      "aaSorting": [[1, "asc"]] 
     }); 
     associatedCreatives = $('#AssociatedCreativeTableId').dataTable({ 
      "bJQueryUI": true, 
      "bStateSave": true, 
      "bAutoWidth": false, 
      "aoColumnDefs": [ 
       { "bSortable": false, "aTargets": [0] }, 
       { "bVisible": false, "aTargets": [3] }, 
      ], 
      "aaSorting": [[1, "asc"]] 
     }); 

     eligibleCreatives.$('tr').click(function() { 
      var data = .fnGetData(this); 
      // this tells me that eligibleCreatives has no method $ 

     }); 


     $('#disassociate-creative').click(function() { 
     //I can't get at the actual row node here. 
     var data = associatedCreatives.fnGetData($(this).closest('tr')[0]); 
     eligibleCreatives.fnAddData(data); 
     associatedCreatives.fnDeleteRow(this); 
     return false; 
     }); 
     $('#associate-creative').click(function() { 
     var data = associatedCreatives.fnGetData($(this).closest('tr')[0]); 
     associatedCreatives.fnAddData(data); 
     eligibleCreatives.fnDeleteRow(this); 
     return false; 
     }); 

    }); 
    function fnClickAssociate() { 
     $('#AssociatedCreativeTableId').dataTable().fnDeleteRow(); 
     $('#AssociatedCreativeTableId').dataTable().fnAddData([]); 
    } 
</script> 

Answer 1

問題は、fnGetDataがノード自体ではなく特定の行の内容のデータオブジェクトを返すことだと思います。しかし、fnAddDataとfnDeleteRowはそれぞれ、データオブジェクトではなくTRノードを必要とします。これを解決するには、2つの方法：

オプション1：

：あなたは $(this).closest('tr')[0]は、あなたがしたい行のために全体のTR要素を返していることを確信している場合は、へご clickの各機能の最初の行を変更

var data = $(this).closest('tr')[0]; 

これは、アクションを実行するために、次の2行に適切なTRノードの機能を提供する必要があります。

オプション2：あなたは$(this).closest('tr')[0]全体TR要素を返していることをわからない場合は、私が使用してDatatable.netのを検討する（あなたは適切なコンテンツが返されるかどうかを確認するために、それを-ing console.log()ことによってこれを確認することができます） fnGetPositionボタンが入っているTD要素には、はるかに柔軟性があり、常にfnAddDataとfnDeleteRowで使用できる要素が返されます。

幸運を祈る！