Блог

Я использую плагин Datatables и динамично заполняю таблицу данными, возвращенными с сервера. на разных рисунках таблицы возвращаемые данные имеют переменную no столбцов. При каждом использовании таблицы код проверяет, были ли предыдущие инициализации, и удаляет их перед созданием новой таблицы с динамическими данными, используя этот код:

  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) для обновления таблицы новыми данными

проблема:

Когда запускается событие 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);

      });
    }
    
      });
    
    } );
 

Я допустил ошибку, объявив переменную столбца вне функции. Каждый раз, когда вызывалась функция, она добавлялась к уже существующим столбцам. Поэтому просто нужно было определить переменную столбца внутри функции.

 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',