Question

因此，当我在react中创建DataTable时，使用columnDefs属性定义某个列。

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

但正如预期的那样，它无法找到test()函数。反正有没有做这个jsx风格或什么？或者我只需要在onclick中创建函数吗？

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

在这种情况下你不能使用渲染，因为函数将被直接调用。您可以在columnDefs中使用箭头功能和createdCell。例如，您在组件中有一个功能：

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

通过以下方式在columnDefs中调用该函数：

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

请查看上面的链接以获取更多信息。

DataTables - 在'columnDefs'中调用函数

2 个答案: