ポップアップで詳細を表示するためにdatatableのセルの内部にボタンを追加するにはどうすればいいですか？

Question

私の質問はdatatable.jsです。私は、コンテンツセルのテールを展開するために、データテーブルの列のセルの内側にボタンを追加したいと思います。赤いボタンをクリックするとpopupmodalが表示され、datatable.jsのコンテンツのすべてのリストが表示されます。

Answer 1

 
You can use fnRowCallback 
https://legacy.datatables.net/ref#fnRowCallback 

$('#example').dataTable({ 
"fnRowCallback": function(nRow,aData,iDisplayIndex,iDisplayIndexFull) { 
    // Bold the grade for all 'A' grade browsers 
    if (aData[4] == "A") 
    { 
    $('td:eq(4)', nRow).html(' <button type="button">Red button </button> '); 
    } 
} 

}）。

Answer 2

基本的なjQuery関数の助けを借りて、これを完全に行うことができます。例に見られるように

Example 1とExample 2

;：

まず第一に、これらの2つの例をご確認ください。

"columnDefs": [ { 
     "targets": -1, 
     "data": null, 
     "defaultContent": "<button>Click!</button>" 
    } ] 

"defaultContent"をターゲット列に追加することができます（ボタンにすることもできます）。この例では、テーブルの最後の列です。そして、このボタンのonclickイベントに任意の機能を与えることができます。

また、次のような行のクリックを検出することもできます。

$('#example tbody').on('click', 'tr', function() { 
    var data = table.row(this).data(); 
    alert('You clicked on '+data[0]+'\'s row'); 
}); 

と$("#myModal").modal()代わりに、

alert('You clicked on '+data[0]+'\'s row');のようなブートストラップモーダルを開きます。