Question

我的项目从AngularJS控制器函数将结果输出到DataTable，但是当我尝试修改搜索参数时遇到了一些奇怪的事情。该表的第一个渲染按预期工作。但是，当我选择其他选项并再次运行搜索时，表中会出现多余的行，但是信息部分显示了上一次搜索的行数，并且通过长度菜单更改显示的行数会导致新行消失。这是我的表声明，使用属性来连接数据表：

<table ui-jq="dataTable" ui-options="dataTableOptions" id="search-results" class="display nowrap datatable cell-borders" style="width: 100%;">

这是我的AngularJS控制器代码：

$scope.dataTableOptions = {
        dom: "lfBrtip",
        lengthMenu: [[25, 50, -1], [25, 50, "All"]],
        language: {
            emptyTable: 'No items matched your search criteria'
        },
        buttons: [
            {
                text: 'Export',
                className: 'button button:hover',
                extend: 'csv'
            }
        ]
    };

    $scope.getItemInfo = function (model) {
        $http({
            method: 'POST',
            url: $scope.getUrl('/My/ServerSide/Url'),
            data: { model: $scope.model }
        }).then(function successCallBack(response) {
            
            $scope.model.SearchResults = response.data;

        }, function errorCallback(response) {
            
            alert("There was an error gathering the entity information. Please try again");
        });
    };

我不确定为什么用不同的参数提交新查询不会仅仅更新DataTables表中的数据。有什么建议么？

Answer 1

我最终使用了一些丑陋的技巧来使其正常工作。甚至DataTables的作者也不确定如何解决将AngularJS与DataTables一起使用的问题，因此每次发布表单时，我都必须强制进行重新初始化。我将搜索参数保存到localStorage，并命名为location.reload（）。然后，当页面加载并且AngularJS init（）函数运行时，我拾取搜索参数并从Angular文档就绪函数内部调用搜索函数，如下所示：

$scope.init = function () {

    $scope.ValidationErrors = [];

    $scope.model = {};
    $scope.model.SearchResults = [];

    $scope.model.ItemNumber = localStorage.getItem("itemNumber");
    $scope.model.StartDate = localStorage.getItem("startDate");
    $scope.model.EndDate = localStorage.getItem("endDate");

    angular.element(document).ready(function () {
        if ($scope.model.ItemNumber) {
            $scope.getItemRecords();
        }
    });

    localStorage.clear();
};

然后我当然会在查询后清除localStorage。并不是很优雅，但是现在必须要做。

AngularJS和DataTables刷新数据

1 个答案: