【问题标题】:JQuery Datatable rows not deleting despite on calling clear function尽管调用 clear 函数,但 JQuery Datatable 行没有删除
【发布时间】:2015-09-01 19:54:46
【问题描述】:

我试图在新数据到达时删除 jquery 数据表中的所有行以填充新行。 但问题是尽管调用了 clear 函数,它只是将结果行添加到前一行。 如何清除 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();
                                }
                            }

【问题讨论】:

  • 我尝试使用 ng repeat ,数据表不适用于 ng repeat 调用 ng repeat 时不会创建页面
  • 实际上,当使用 ng repeat 时,jquery 数据表将数组并制成页面,数据表分页功能不会运行以使其进入不同的页面,而不是将数组自动显示为一页长行。我想使用数据表分页功能
  • 您是否考虑过从 DataTables 切换到像 UI-Grid 这样的 Angular 插件?它支持分页并具有一些非常高级的功能。 ui-grid.info

标签: javascript jquery angularjs datatables


【解决方案1】:

我会将这段代码放在$timeout 中。 dataTables 和 angular 都想操纵 DOM - angular 赢得了这场战斗,因此 dataTables 永远没有机会完成它的业务。 $timeout 将强制数据表 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();
    }
});

好吧,这至少是我的理论 - 无法完全复制您的场景 - 如果有什么不同,请告诉我。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-09-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-09-04
    • 1970-01-01
    相关资源
    最近更新 更多