如何在jQuery DataTable无数据返回时显示自定义提示信息

方法1：完善DataTable原生语言配置（推荐） #

你之前的配置漏掉了infoEmpty项——这正是用来替换无数据时info区域默认文本“Showing 0 to 0 of 0 entries”的配置。补充后即可实现需求：

var dataTableOptions = {
   "paging": true,
   "lengthChange": false,
   "searching": true,
   "ordering": true,
   "info": true,
   "autoWidth": false,
   "responsive": true,
   "columnDefs": [], // 空配置建议设为数组而非空字符串
   "processing": true,
   "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
   "pageLength": 10,
   "language": {
       "emptyTable": 'No records found!', // 表格初始化无数据时的提示
       "zeroRecords": 'No records found!', // 搜索/筛选后无数据时的提示
       "infoEmpty": 'No records found!', // 替换info区域的无数据默认文本
       "info": 'Showing _START_ to _END_ of _TOTAL_ entries' // 保留有数据时的默认格式
   }
}

方法2：修复自定义div的显示逻辑 #

你之前的代码仅在表格初始化时执行一次判断，当查询条件变更、表格重绘时不会重新检查数据状态。通过监听DataTable的draw事件，可实现实时控制：

HTML部分 #

<div id="emptyRows" style="display: none;">No records found!</div>

JS部分 #

var myDataTable = $('#riskReport').DataTable(dataTableOptions);

// 监听表格重绘事件，每次数据变更后重新判断
myDataTable.on('draw', function() {
    $('#emptyRows').toggle(!myDataTable.data().any());
});

// 初始化时执行一次判断
$('#emptyRows').toggle(!myDataTable.data().any());

关于修改#riskReport_info无效的说明 #

DataTable每次重绘（搜索、分页、筛选时）都会重新生成info区域的文本，直接修改会被覆盖。如果一定要用这种方式，需在draw事件内修改：

myDataTable.on('draw', function() {
    if (!myDataTable.data().any()) {
        $('#riskReport_info').text('No records found!');
    }
});

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