如何使用 Datatables Jquery 插件销毁表并使用新的更新数据重新初始化同一个表

Posted 2023-02-19

【中文标题】如何使用 Datatables Jquery 插件销毁表并使用新的更新数据重新初始化同一个表

【英文标题】：how to destroy table and reinitialize same table with new updated data using Datatables Jquery plugin

【发布时间】：2021-09-03 06:43:35

【问题描述】：

我正在使用 Datatables 插件并使用从服务器返回的数据动态填充表。在不同的表上绘制返回的数据具有可变的列数。在每个表初始化中，代码会检查是否有以前的初始化，并在创建具有动态数据的新表之前将其删除，使用以下代码：

 if ( $.fn.dataTable.isDataTable( '#contracts_forecast' ) ) 

  $('#contracts_forecast').DataTable().clear();
  $('#contracts_forecast').DataTable().destroy();
$('#contracts_forecast tbody').empty();
$('#contracts_forecast thead').empty();

在服务器端，我手动编辑数据并更新数据库。当数据库用新数据更新时，我想刷新表，以便将更改反映在表中。为此，我使用了 POST SUBMIT 事件，该事件在数据提交到服务器后触发，然后调用函数 getDT(filter_product_code, filter_product_name) 用新数据更新表 p>

问题：

当 post submit 事件被触发时，它会调用函数 getDT(filter_product_code, filter_product_name);并反映了变化。 但是更新后的新表被添加到当前表中，而旧表没有被销毁，这让我在屏幕上看到了两个相同的表

p.s 我假设每次调用 getDT() 函数时，它应该检查表是否已初始化并在使用相同的创建新表之前销毁它

   $(document).ready(function() 
    
      $('#filter').click(function()
    
    
      var  filter_product_code = $('#filter_product_code').val();
      var filter_product_name = $('#filter_product_name').val();
    
    
       if(filter_product_code == '' || filter_product_name == '')
       
     alert('Select Both filter option');
       
    
    
    var columns = [];
    
    getDT(filter_product_code, filter_product_name);
    
    function getDT(filter_product_code, filter_product_name) 
    
      $.ajax(
    
                    serverSide: true,
                     type:'POST',
    
             url: "/XXX/_fetch.php",
    
              data:  filter_product_code: JSON.stringify(filter_product_code),
    
    
               filter_product_name: JSON.stringify(filter_product_name),
    
                  success: function (data) 
            data = JSON.parse(data);
            columnNames = Object.keys(data.data[0]);
            for (var i in columnNames) 
              columns.push(data: columnNames[i], 
                        title: capitalizeFirstLetter(columnNames[i]));
                                           
    
            
    
    
    
      if ( $.fn.dataTable.isDataTable( '#contracts_forecast' ) ) 
    
      $('#contracts_forecast').DataTable().clear();
      $('#contracts_forecast').DataTable().destroy();
    $('#contracts_forecast tbody').empty();
    $('#contracts_forecast thead').empty();
    
    
    
     
        table = $('#contracts_forecast').DataTable(
              data: data.data,
                columns: columns,
              
                dom: "Bfrtip",
                select: true,
            buttons: [
                 extend: "create", editor: editor ,
                 extend: "edit",   editor: editor ,
                 extend: "remove", editor: editor 
            ],
             "columnDefs": [
                
                    "targets": [0],
                    "visible": false,
                    "searchable": false
                ,
                  className: "tablecolumns", targets: "_all" ,
                ]
             );
    
       $('#contracts_forecast').on( 'click', 'tbody td:not(:first-child)', function (e) 
    
          editor.inline( this );
    
         );
    
     
      
        );
 editor.on( 'postSubmit', function (  e, json, data, action, xhr  ) 

 getDT(filter_product_code, filter_product_name);

      );
    
    
      );
    
     );

【参考方案1】：

我在函数外部声明列变量是个错误。每次调用该函数时，它都会添加到已经存在的列中。所以只需要在函数内部定义列变量。

getDT(filter_product_code, filter_product_name);

function getDT(filter_product_code, filter_product_name) 

    var columns = [];


  $.ajax(

                serverSide: true,
                // paging: true,
                // retrieve:true,
                                         type:'POST',