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

【问题标题】：how to destroy table and reinitialize same table with new updated data using Datatables Jquery plugin如何使用 Datatables Jquery 插件销毁表并使用新的更新数据重新初始化同一个表
【发布时间】：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);

      });
    }
    
      });
    
    } );

【问题讨论】：

标签： javascript php mysql function datatables

【解决方案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',

【讨论】：