在 AJAX 中重新加载 DATATABLE 成功而不刷新页面

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 数据表或本地数据表，则需要这样

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