Question

几周后我和ngTable一直玩得很顺利，现在我面临着同时做两件事的奇怪问题：

使用服务器端分页从API获取数据。
重新加载用户输入表。

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

屏幕： A 选择菜单，文本框， GO！按钮和ngTable。< / p>

案例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会根据我们在应用过滤器函数中调用的过滤器而有所不同

ngTable重新加载表与服务器端分页

1 个答案: