JavaScript - jquery DataTableは、行+クリックイベントにボタンを追加します。

Question

データテーブルが行を構築しているときにclickイベントをアタッチすることは可能ですか？外部グローバル関数を呼び出して閉じます。

$('#example').DataTable({ 
    columns : [{ 
     title : 'msg', 
     sClass : 'col-sm-2', 
     render : function(data, type, row){ 
      var b = $('<button>the button</button>').click(function(){ 
       alert(row.msg); 
      }) 
      return b; 
     } 
    }], 
    ajax:{ 
     type : 'POST', 
     url : 'foo.php', 
    } 
}); 

私は上記の例を知っています。dosnt work、cos render関数は文字列を返す必要があります。これは単なる例です。

• 要素を作成します。
• 添付のクリック機能「行」オブジェクトを渡し、グローバル関数を呼び出しません。

Answer 1

短い回答、できません。各行は後

var myDataTable=$('#example').DataTable({ // note the stored reference to the dataTable 
    columns : [{ 
     title : 'msg', 
     sClass : 'col-sm-2', 
     render : function(data, type, row){ 
      return '<button class="some-class">the button</button>'; 
     } 
    }], 
    ajax:{ 
     type : 'POST', 
     url : 'foo.php', 
    } 
}); 


$(document).on('click', '.some-class', function(){ 
     var $btn=$(this); 
     var $tr=$btn.closest('tr'); 
     var dataTableRow=myDataTable.row($tr[0]); // get the DT row so we can use the API on it 
     var rowData=dataTableRow.data(); 
     console.log(rowData.msg); 
}); 

---

技術的あなたはハンドラをアタッチするrowCallback functionを使用することができます。私はこのように、あなたはがにしたくないが、私は、クラスやイベントの委任を使用することになり見ますレンダリングされますが、.find()などを使用してボタンに戻る必要があります。上に概説したアプローチは、はるかにクリーンなIMHOです。