DataTables - 在'columnDefs'中調用函數

Question

因此，當我在 React 中創建 DataTable 時，使用columnDefs屬性定義特定列。

"columnDefs": [
            {
              "targets": 7,
              "data": "data",
              "render": function ( data, type, full, meta ) {
                return "<button onclick='test()'>view</button>"
              }
            }
          ]

但正如預期的那樣，它找不到test() function。有沒有辦法做這種 jsx 風格之類的？ 還是我只需要在 onclick 中創建 function？

Answer 1

您可以這樣嘗試：

$('#your_table').DataTable({

. . . 

"columnDefs": [{
                "targets": 7,
                "data": "data",
                "render": function ( data, type, full, meta ) {
                            return "<button class='view_btn' data-id='"+data+"'>view</button>"
                          }
              }]

然后在外部創建測試功能：

$('#your_table').on('click', '.view_btn', function(){
  var id = $(this).data('id');
  test(id); // your function
});

Answer 2

在這種情況下，您將無法使用render，因為該函數將被直接調用。 您可以使用箭頭功能和createdCell insetead在columnDefs 。 例如，您在組件中具有一個函數：

 this.test= this.test.bind(this);

通過以下方式在columnDefs調用該函數：

"columnDefs": [{
  "targets": 0,
  "data": "data",
  "createdCell": (td, cellData, rowData, row, col) => {
    $(td).click(e => {
      this.test();
    })
  }
}]

請查看上面的鏈接以獲取更多信息。

Answer 3

您可以使用箭頭 function 和this object

"columnDefs": [
            {
              "targets": 7,
              "data": "data",
              "render": ( data, type, full, meta ) => {
                return "<button onclick='this.test()'>view</button>"
              }
            }
          ]