尽管调用了clear函数,但JQuery Datatable行不会被删除

时间:2015-09-01 19:54:47

标签: javascript jquery angularjs datatables

我试图在新数据到达时删除jquery数据表中的所有行以填充新行。 但问题是尽管调用清除函数它只是将结果行添加到前一行。 如何清除jquery数据表中的行。以下是代码

var table = $("#editable");
                var tp = table.DataTable({
                    "paging": true,
                    "createdRow": function (row, data, index) {
                        $compile(row)($scope);
                    }
                });
//more code here ajax call only from angular post

                           if (result != null) {
                                $scope.reviews = result;
                                $window.toastr["success"]("Loaded Successfully !", "Recent Reviews");
                                tp.clear().draw();
                                for (var i = 0; i < $scope.reviews.length; i++) {
                                    var id = $scope.reviews[i].ID;
                                    var checked = $scope.reviews[i].Enabled == "1" ? true : false;
                                    tp.row.add([
                                        $scope.reviews[i].ID,
                                        $scope.reviews[i].AddedOn,
                                        $scope.reviews[i].Company.Name,
                                        $scope.reviews[i].Rate,
                                        $scope.reviews[i].User.Name,
                                        $scope.reviews[i].Description,
                                        "<div class='switch'><div class='onoffswitch'><input ng-model='$scope.reviews[" + i + "].Enabled' ng-click='ChangeReviewPublishStatus(" + $scope.reviews[i].ID + ")' ng-checked='" + checked + "' class='onoffswitch-checkbox' id= 'stat" + id + "' type= 'checkbox'><label class='onoffswitch-label' for='stat" + id + "'><span class='onoffswitch-inner'></span><span class='onoffswitch-switch'></span></label></div></div>"
                                    ]).draw();
                                }
                            }

1 个答案:

答案 0 :(得分:1)

我会将这段代码放在$timeout内。 dataTables和angular都希望操纵DOM - 角度赢得了战斗,并且数据表从未有机会完成其业务。 $timeout将强制dataTables clear()和数据填充到下一个摘要中,并确保它实际执行。

$timeout(function() {
    tp.clear().draw();
    for (var i = 0; i < $scope.reviews.length; i++) {
        var id = $scope.reviews[i].ID;
        var checked = $scope.reviews[i].Enabled == "1" ? true : false;
        tp.row.add([
            $scope.reviews[i].ID,
            $scope.reviews[i].AddedOn,
            //etc
        ]).draw();
    }
});

嗯,这至少是我的理论 - 不能完全复制你的场景 - 让我知道它是否有任何区别。