Datatables表格提示无数据 点击排序分页后数据消失问题求助

问题原因 #

• 你使用了AngularJS的ng-repeat指令动态渲染表格行，$(document).ready触发时AngularJS的模板渲染流程还没完成，DataTables初始化时读取到的表格是空的，会自动在表格底部插入无数据提示行。后续AngularJS完成行渲染只是修改了页面DOM，DataTables内部已经缓存了初始的空数据状态，触发排序、分页等操作时，会调用缓存的空数据重新渲染表格，导致所有数据消失。

解决方案 #

你需要等AngularJS把ng-repeat对应的表格行全部渲染完成之后，再初始化DataTables，两种常用实现方式如下：

方法1：通过自定义指令监听渲染完成事件 #

首先自定义AngularJS指令监听ng-repeat渲染完成状态，再触发DataTables初始化：

// 自定义ngRepeat完成事件指令
app.directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit(attr.onFinishRender);
                });
            }
        }
    }
});

// 在对应controller中监听渲染完成事件，初始化DataTables
app.controller('yourController', function($scope) {
    // 原有业务逻辑
    $scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
        if (!$.fn.DataTable.isDataTable('#example')) {
            $('#example').DataTable({
                destroy: true // 销毁已存在的旧实例，避免重复初始化报错
            });
        }
    });
});

修改HTML中ng-repeat对应的行，加上自定义指令属性：

<tr ng-repeat="u in user_report" on-finish-render="ngRepeatFinished">

方法2：异步数据赋值后延迟初始化 #

如果user_report是异步请求获取的，在赋值完成后加短延迟再初始化DataTables：

// 获取user_report的异步请求回调内
$http.get('你的接口地址').then(function(res) {
    $scope.user_report = res.data;
    // 等待Angular完成DOM渲染后初始化
    setTimeout(function() {
        if (!$.fn.DataTable.isDataTable('#example')) {
            $('#example').DataTable({
                destroy: true
            });
        }
    }, 0);
})

注意事项 #

• 你的表格表头第一列使用了<td>标签，建议统一修改为<th>，避免DataTables识别表头时出现异常：

<th class="center">#</th>

• 后续如果user_report数据更新后，都需要先销毁旧的DataTables实例再重新初始化，避免数据冲突。

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