jQuery DataTables非服务端模式下初始化时如何显示Loading提示

核心修改点 #

• 新增processing: true配置项：开启后DataTables会在所有数据处理（包括初始化、排序、分页等）开始前自动显示加载提示，处理完成自动隐藏，完全符合你需要的类似beforesend钩子的效果，且加载提示元素由插件自动生成，不需要你提前写冗余的静态HTML
• 可选新增deferRender: true：优化客户端大数据量下的渲染效率
• 你现有的language.processing和initComplete逻辑可以直接保留

调整后完整代码 #

<!-- 表格默认设为隐藏即可 -->
<table class="table" style="display: none;">
  <!-- 表格表头、表体内容 -->
</table>

<script>
$(document).ready(function() {
   $(".table").DataTable({
        "processing": true, // 新增：开启内置加载提示
        "deferRender": true, // 可选：优化渲染效率
        "bFilter": true,
        "lengthMenu": [ 10, 25, 50, 75, 100, 150, 200, 500, 1000 ],
        "columnDefs": [{ targets: 'no-sort', orderable: false }],
        "pageLength": 50,
        "language": {
            "processing": "Loading..." // 自定义提示文本会自动生效
        },
        "initComplete": () => {
            $(".table").show();
        }
    });
});
</script>

原理解释 #

你之前使用preInit事件没有生效的原因是，该事件触发时DataTables的内置DOM元素（包括加载提示元素）还未完成初始化，此时手动控制显隐不会生效。使用官方原生的processing配置是最稳定的实现方式，不需要额外自定义事件监听。

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