Перезагрузите DATATABLE внутри AJAX без обновления страницы

Question

У меня есть таблица с использованием плагина Datatable. Я отфильтровал то, что я хочу удалить, и после удаления мне удалось очистить значение.

После этого, если я захочу отфильтровать, используя тот же текст, например, у меня есть ba 1 и ba 2, и после удаления ba 1 будет отображаться ячейка, когда я введу ba в фильтре. поле текстовой области. Предполагается отобразить оставшиеся ba, которые еще не удалены.

К вашему сведению, я не использую встроенный метод Datatable Ajax.

Я пытаюсь перезагрузить таблицу с новыми данными, не обновляя страницу после ajax on success. Как это сделать?

Мои данные:

var table1 = $('#table1').DataTable(
            {                    
                pageLength : 500,      
                lengthChange: false,
                deferRender: true,
                scrollY:  800,
                scrollCollapse: true,
                scrollX: true,
                bSort: false,
                cache: true,
                autoWidth: false,
                columnDefs: [
                    {
                        targets: 0,                            
                        checkboxes: 
                        {
                            selectRow: true
                        }
                    }
                ],
                select: {
                    style: 'multi',
                    selector: 'td:not(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(9), :nth-child(10), :nth-child(13), :nth-child(14), :nth-child(15), :nth-child(16), :nth-child(17), :nth-child(18), :nth-child(19), :nth-child(20), :nth-child(21), :nth-child(22), :nth-child(23), :nth-child(24), :nth-child(25))'

                }
            }); 

Вот мой код функции фильтрации:

table1.columns().every(function () 
{
   var table = this;
   $('.filter', this.header()).on('keyup change', delay(function (settings, data, dataIndex) 
   {
      if (table.search() !== this.value) 
      {
         table.search(this.value).draw();
      }
   }, 500));
});

Вот мой код успеха AJAX для удаления на основе установленного флажка:

$('.btnN2').click(function(){
   var answer = confirm('Delete N2 : Are you sure you want to delete selected items?');
   if (answer)
   {
      console.log('yes');
      var rows = $(table1.rows({selected: true}).$('input[type="checkbox"]').map(function()
      {
         return $(this).prop("checked") ? $(this).closest('tr').attr('data-getstockcode') : null;
      }));

      var getstockcodes = [];

      $.each(rows, function(index, rowId) 
      {
         console.log(rowId) 
         getstockcodes.push(rowId);
      });

      $.ajax({
         url: 'del_n2',
         type: 'GET',
         data: {"getstockcodes": JSON.stringify(getstockcodes)},
         dataType: 'JSON',
         success:function(data){                                 
            console.log(data);
            $(table1.rows({selected: true}).$('input[type="checkbox"]').map(function()
            {
               if($(this).prop("checked"))
               {
                  $(this).parents("tr:eq(0)").find(".note2").val('');                                                                                                                       
                  console.log('reset');
               }
            }));
         }
      });
   }
   else
   {
      console.log('cancel');
   }
});

Вот мои данные вставки, основанные на событии keyup

$(".note2").keyup(delay(function()
{  
   var stockcode = $(this).data("stockcode");
   var stockname = $(this).data("stockname");
   var value = $(this).val().replace(/(\r\n|\n)/g, "\\n");

   $.ajax({
      url: 'saveNote2',
      type: 'GET',
      data: 'stockcode='+stockcode+'&stockname='+stockname+'&value='+value,
      dataType: 'JSON',
      success: function(data){                  
         console.log(data);
      },
      error: function(data){                        
         console.log(data);
      }
   });
}, 300));

Answer 1

Просто добавьте это в функцию успеха

table1.ajax.reload() 

Если вы используете ajax datatable или local, вам нужно сделать так:

  table1.clear(); 
  table1.rows.add(your response data array); 
  table1.draw()