如何在数据表的单元格内添加一个按钮以在弹出窗口中显示详细信息？答案

【问题标题】：How to add a button inside of datatable's cells to show detail in popup?如何在数据表的单元格内添加一个按钮以在弹出窗口中显示详细信息？
【发布时间】：2016-05-20 10:51:54
【问题描述】：

我的问题是关于 datatable.js 。我想在数据表列的单元格内添加按钮以扩展内容单元格的细节。如果我单击红色按钮，弹出模式应该会显示 datatable.js 中的所有内容列表。

【问题讨论】：

标签： javascript jquery css datatable datatables-1.10

【解决方案1】：

您可以使用 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> ' );
  }
}

});

【讨论】：

一个column.render 会更新:)

【解决方案2】：

借助基本的jQuery函数，完全可以做到这一点。

首先，请检查这两个例子：

Example 1 和 Example 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' );.

【讨论】：