使用Function調用DataTable並在單擊時獲取TD數據，但收到“無法讀取未定義屬性'0'”的錯誤

Question

我在獲取表上<td>的數據時遇到問題，但收到此錯誤“無法讀取未定義的屬性 '0' ”。

我想要的是，當我單擊表的<tr>時，它假設獲取<td>數據。

這段代碼工作正常並得到結果。

  var my_table= jQuery('#my_table').DataTable({
         "lengthChange": false,
         "autoWidth": false,
         "searching": true,
         "ordering": false,
         "processing":true,
         "serverSide":true,
         "order":[],
         "ajax":{
           url:"admin-ajax.php",
           data:{action:"table_json"},
           type:"POST"
         },
         "columnDefs":[
           {
             "targets":[0],
             "orderable":false,
           },
         ],
  });
jQuery('#my_table tbody').on( 'click', 'tr', function () {
     var data = my_table.row( this ).data() ;
     console.log(data[0]);
} );

但是當我把它包裝在一個函數示例上時：

function call_thisTable(ParameterA,ParameterB){
 var my_table= jQuery('#my_table').DataTable({
             "lengthChange": false,
             "autoWidth": false,
             "searching": true,
             "ordering": false,
             "processing":true,
             "serverSide":true,
             "order":[],
             "ajax":{
               url:"admin-ajax.php",
               data:{action:"table_json"},
               type:"POST"
             },
             "columnDefs":[
               {
                 "targets":[0],
                 "orderable":false,
               },
             ],
      });
    jQuery('#my_table tbody').on( 'click', 'tr', function () {
         var data = my_table.row( this ).data() ;
         console.log(data[0]);
    } );
}

然后每次我單擊“按鈕”時，我都會首先銷毀表格以重新啟動內容並調用此函數call_thisTable(A,B) 。

jQuery(document).on("click",".click_button",function(){
  var A = jQuery(this).attr("data-a");
  var B = jQuery(this).attr("data-b");

  $('#my_table').DataTable().destroy();
  call_thisTable(A,B);
});

在我第一次調用call_thisTable(A,B); ，您將獲得所需的數據，但在第二個、第三個等中，您將收到“無法讀取未定義的屬性‘0’ ”錯誤。

Answer 1

這行代碼有問題。

    $('#my_table').DataTable().destroy();

您正在初始化數據表並同時銷毀它。 嘗試擺脫

    DataTable()

在那條線上。

Answer 2

感謝@Afdufsko，解決這個問題。 我在函數之外推出了數據表初始化。

var my_table= jQuery('#my_table').DataTable({
             "lengthChange": false,
             "autoWidth": false,
             "searching": true,
             "ordering": false,
             "processing":true,
             "serverSide":true,
             "order":[],
             "ajax":{
               url:"admin-ajax.php",
               data:{action:"table_json"},
               type:"POST"
             },
             "columnDefs":[
               {
                 "targets":[0],
                 "orderable":false,
               },
             ],
      });
function call_thisTable(my_table,ParameterA,ParameterB){
    jQuery('#my_table tbody').on( 'click', 'tr', function () {
         var data = my_table.row( this ).data() ;
         console.log(data[0]); 
         //do some ajax here
    } );
}

然后我沒有破壞數據表來啟動新內容，而是使用了ajax.reload() 。

jQuery(document).on("click",".click_button",function(){
  var A = jQuery(this).attr("data-a");
  var B = jQuery(this).attr("data-b");

  $('#my_table').ajax.reload();
  call_thisTable(my_table,A,B);
});