jquery - ngTable 重新加载带有服务器端分页的表

Question

几周来我一直在顺利地使用 ngTable，现在我面临着一个同时做两件事的奇怪问题:

1. 通过服务器端分页从 API 获取数据。
2. 根据用户输入重新加载表格。

虽然这两件事单独完成时很容易实现，但当我试图同时实现它们时有点困难。

屏幕:一个选择菜单、一个文本框、一个GO!按钮和一个ngTable。

情况 1: 点击 GO 即可调用 API!按钮。 ng-click="loadTable()" 数据显示在 #userTable

中

$scope.loadTable = function () {
            $scope.filterParam = $scope.admin.selectedFilter;
            $scope.textParam = $scope.admin.enteredFilterText;
            $scope.tableParams = new ngTableParams({
                page: 1,            // show first page
                count: 10          // count per page
            }, {
                counts: [],
                getData: function ($defer, params) {
                   $http.get($scope.admin.baseUrl + "/Api/User/GetUsersProjects?strKey=" + $scope.filterParam + "&strValue=" + $scope.textParam).then(function (response) {
                    $scope.admin.tableData = response.data.Users;
                    $scope.admin.totalRecords = response.data.TotalRecords;
                });
                        var orderedData = params.sorting() ? $filter('orderBy')($scope.admin.tableData, params.orderBy()) : $scope.admin.tableData;
                        params.total($scope.admin.totalRecords);
                        $defer.resolve(orderedData);
                }
            });
            $("#userTable").show();
        }

案例 1 出现问题:分页不起作用。

情况 2: 在 init() 方法的 getData: 方法中调用 API，并通过 API 调用传递 pageIndex。

init();
function init() {
    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10          // count per page
    }, {
        counts: [],
        getData: function ($defer, params) {
           $http.get($scope.admin.baseUrl + "/Api/User/GetUsersProjects?strKey=" + $scope.filterParam + "&strValue=" + $scope.textParam + "&pageIndex=" + params.page()).then(function (response) {
            $scope.admin.tableData = response.data.Users;
            $scope.admin.totalRecords = response.data.TotalRecords;
        });
                var orderedData = params.sorting() ? $filter('orderBy')($scope.admin.tableData, params.orderBy()) : $scope.admin.tableData;
                params.total($scope.admin.totalRecords);
                $defer.resolve(orderedData);

        }
    });
};

$scope.loadTable = function () {
    $scope.filterParam = $scope.admin.selectedFilter;
    $scope.textParam = $scope.admin.enteredFilterText;
    $scope.tableParams.reload();
    $("#userTable").show();
}

案例 2 的问题:我无法刷新更改后的用户输入的表格(如果用户更改其输入并单击 GO! 在表格渲染一次之后)。因为，ngTable拒绝重新创建tableParams的实例(我不确定这里会发生什么)

API 输出的 JSON 结构:

{
    "PageSize": 10,
    "TotalRecords": 1,
    "Users": [
        {
            "ID": 12,
            "FirstName": "Vibhor",
            "LastName": "Dube",
            "UserID": "vibhord",
            "Email": "vibhord@vibhor.com",
            "Phone": "111",
            "Fax": "1233243",
            "IsActive": true,
            "Projects": []
        }
    ]
}

Answer 1

我也遇到了同样的问题。

它是通过这样做来工作的:

$scope.applyFilters = function (x, y, z) {
    $scope.tableParams.reload();
};

$scope.getTableData = function($defer, params) {
    $http.get(getUrl)
    .success(function (response, status) {
     if  (status==200) {
     var data = response._embedded.players;
     var orderedData = params.$params.sorting ?
     $filter('orderBy')(data, params.orderBy()) :data;
     params.total(response.total_items);
     $defer.resolve(orderedData);

    }

    })
};

$scope.tableParams = new ngTableParams({
    page: $scope.page_count // show first page
    , count: $scope.page_length    // count per page
   }, {
   total: 0, // length of data
   counts: [10 ,20 ,50 ,100],
   getData: $scope.getTableData
 });

getUrl 将根据我们在应用过滤器函数中调用的过滤器而变化