使用ajax OnSubmit事件加载数据时如何为DataTable添加加载提示

DataTable自带的processing配置仅对组件内部封装的ajax请求逻辑自动生效。如果你是自行编写$.ajax逻辑拉取数据，再手动调用clear、rows.add、draw方法渲染表格，组件无法自动感知你的请求和渲染生命周期，因此加载提示不会自动触发，这是配置不生效的根本原因。

• 方案1：手动调用组件API控制加载提示，适配现有代码逻辑改动最小
  初始化表格时正常开启processing配置，可自定义加载提示文案：

  const dataTable = $('#yourTable').DataTable({
    processing: true,
    // 保留你现有已配置的列规则、排序规则等参数
    language: {
      processing: "数据加载中，请稍候..."
    }
  })
  

  搜索按钮点击逻辑中，在请求发起前手动开启加载态，等待数据渲染完成后再关闭：

  $('#searchBtn').on('click', function() {
    // 读取三个下拉框的搜索参数
    const param1 = $('#select1').val()
    const param2 = $('#select2').val()
    const param3 = $('#select3').val()
  
    // 发起请求前立刻打开加载遮罩
    dataTable.processing(true)
  
    $.ajax({
      url: 'your/query/api',
      data: { param1, param2, param3 },
      dataType: 'json',
      success: function(res) {
        dataTable.clear()
        dataTable.rows.add(res.list)
        // 监听渲染完成事件，DOM绘制结束后再关遮罩
        dataTable.one('draw.dt', function() {
          dataTable.processing(false)
        })
        dataTable.draw()
      },
      error: function() {
        // 异常分支必须关闭遮罩，避免遮罩永久停留
        dataTable.processing(false)
        alert('数据查询失败，请重试')
      }
    })
  })
  

  注意不要在ajax的success回调里立刻关闭加载态：12000条数据的DOM拼接渲染本身就需要数秒，提前关闭会导致用户在渲染阶段看到旧数据，还可能触发误操作。
• 方案2：自定义全局加载遮罩
  如果对默认加载提示的样式、覆盖范围有自定义需求，可以自行写一个fixed定位的遮罩层，覆盖表格区域或者整个视口，中间放加载动画。控制逻辑和方案1完全一致：发起请求前显示遮罩，渲染完成/请求报错后隐藏遮罩，样式灵活度更高。
• 方案3：从性能层面缩短加载等待时间
  1. 初始化表格时开启deferRender: true配置，组件会延迟渲染非可视区域的行DOM，12000条数据场景下渲染耗时可以降低60%-80%
  2. 如果后端接口支持，切换为服务端分页模式（开启serverSide: true），每次仅拉取当前页需要的几十条数据，加载耗时可以从秒级降到百毫秒级，从根源解决长等待的问题。

不要在清空旧数据之后才显示加载提示，不然会出现短时间的表格空白。正确执行顺序是：点击搜索→立刻显示加载遮罩→拉取新数据→清空旧数据写入新值→渲染完成→关闭遮罩。

内容的提问来源于stack exchange，提问作者michael