Question

我试图在我的表格中使用ng-table进行分页，尽管表格渲染得很完美，但表格中缺少分页。

控制器

startBlockUI('wait..', 3);
    $http({
        url: url,
        method: "POST",
        data: "",
        headers: headers
    }).success(function (data, status, headers, config) {
        //$scope.persons = data; // assign  $scope.persons here as promise is resolved here
        stopBlockUI();
        if (data.Status == "200") {
            $scope.InProgressTaskList = data.Payload;
        }

    }).error(function (data, status, headers, config) {

    });

    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 5           // count per page
    }, {
        total: $scope.InProgressTaskList.length, // length of data
        getData: function ($defer, params) {
            $defer.resolve($scope.InProgressTaskList.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });

HTML

<div class="box-body no-padding" ng-cloak>
                            <p><strong>Page:</strong> {{tableParams.page()}}</p>
                            <p><strong>Count per page:</strong> {{tableParams.count()}}</p>
                                <table ng-table="tableParams" class="table table-condensed">
                                    <tbody>
                                   <!-- <tr>                                            
                                        <th>Task</th>
                                        <th>Progress</th>
                                        <th style="width: 40px">Label</th>
                                    </tr>-->
                                    <tr ng-repeat="subTask in InProgressTaskList">
                                        <!--<td ng-show="!isMobile">{{subTask.creationDate}}</td>-->
                                        <td data-title="'Task'">{{subTask.title}}&nbsp <span><a  ng-click="openTemplateInfoPageWithId(subTask.editId)" role="button" data-toggle="modal">info</a></span> <span> <a ng-click="deleteTemplateEditPageWithId(subTask.editId)" role="button" data-toggle="modal"><font color="red">Delete </font></a> </span></td>
                                        <td data-title="'Progress'">
                                            <div class="progress xs">
                                                <div style="width: 55%" class="progress-bar progress-bar-danger"></div>
                                            </div>
                                        </td>
                                        <td data-title="'Label'"><span class="badge bg-red">55%</span></td>
                                    </tr>

                                </tbody></table>
                            </div><!-- /.box-body -->

所有数据都来自文件，但每页应该有5行。但那并没有发生。同样的快照如下。

enter image description here

Answer 1

一旦获得数据，似乎您没有重新加载tableParams。

一旦获得数据，请考虑重新加载tableparams，方法是调用reload()：

$scope.tableParams.reload()

在本节中：

if (data.Status == "200") {
       $scope.InProgressTaskList = data.Payload;
       $scope.tableParams.reload();
}

ng-table不呈现分页

1 个答案: