dirPagination -不显示分页链接？

Question

我正尝试在我的应用程序中使用服务器端分页，但我无法这样做，因为缺少分页选项。我正在使用这个tutorial进行分页。

下面是我的代码：

JavaScript：

$scope.vm={};

       // var vm = this;@TODO
        $scope.vm.users = []; //declare an empty array
        $scope. vm.pageno = 1; // initialize page no to 1
        $scope. vm.total_count = 0;
        $scope.vm.itemsPerPage = 10; //this could be a dynamic value from a drop down
        $scope.getData = function(pageno){ // This would fetch the data on page change.
            //In practice this should be in a factory.
            $scope.vm.users = [];
            //$http.get("http://localhost:8093/ProductLicensingApplication/pagingList/{itemsPerPage}/{pagenumber}").success(function(response){
            //    //ajax request to fetch data into vm.data
            //    vm.users = response.data;  // data to be displayed on current page.
            //    vm.total_count = response.total_count; // total data count.
            //});
            var params = {
                pageno:  $scope.vm.pageno,
                itemsPerPage:  $scope.vm.itemsPerPage
            };
            featureService.getPagingFeatures(params).then(function (response) {

                console.log("Getting paging Feature list..");
                console.log(response.status);
                if (response.status.name == "OK") {
                    $scope.vm.users = response.pagingFeaturesList;  // data to be displayed on current page.
                    $scope.vm.total_count = response.total_count; // total data count.
                    console.log("paging success");
                    console.log( $scope.vm.users);
                    console.log( $scope.vm.total_count);
                } else {

                }
            }, function (error) {
                console.log(error);
            });

        };
        $scope.getData( $scope.vm.pageno);

HTML：

<table class="table table-striped table-hover">
                                            <thead>
                                            <tr>
                                                <th> SR# &nbsp;</th>
                                                <th> Name &nbsp;</th>
                                                <th> Code &nbsp;</th>
                                                <th> Description &nbsp;</th>
                                                <th> is Active &nbsp;</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr ng-show="vm.users.length <= 0"><td colspan="5" style="text-align:center;">Loading new data!!</td></tr>
                                            <tr dir-paginate="user in vm.users|itemsPerPage:vm.itemsPerPage" total-items="vm.total_count">
                                                <td> {{$index+1}}</td>
                                                <td>{{user.name}}</td>
                                                <td>{{user.code}}</td>
                                                <td> {{user.description}}</td>
                                                <td> {{user.isActive}}</td>
                                            </tr>
                                            </tbody>
                                        </table>
                                        <dir-pagination-controls
                                                max-size="10"
                                                direction-links="true"
                                                boundary-links="true"
                                                on-page-change="vm.getData(newPageNumber)" >
                                        </dir-pagination-controls>

现在我的表格是这样显示的

​

请告诉我如何在我的表格下面添加分页链接，我已经通过堆栈溢出和谷歌不同的解决方案，但它对我不起作用。

Answer 1

您可以在Html中使用以下代码：

<pagination ng-model="page"
                        page="pagingInfo.page"
                        total-items="pagingInfo.totalItems"
                        items-per-page="pagingInfo.itemsPerPage"
                        ng-change="selectPage(page)"
                        max-size="10"
                        rotate="false"
                        boundary-links="true"></pagination>

在控制器中：

$scope.pagingInfo = {
            page: 1,
            itemsPerPage: 10,
            sortBy: 'NO',
            reverse: false,
            search: '',
            totalItems: 0
        };



  $scope.selectPage = function (page) {
        $scope.pagingInfo.page = page;


        getPagingFeatures();
    };

featureService.getPagingFeatures($scope.pagingInfo).then(function (response) {

                console.log("Getting paging Feature list..");
                console.log(response.status);
                if (response.status.name == "OK") {
                    $scope.vm.users = response.pagingFeaturesList;  // data to be displayed on current page.
                    $scope.vm.total_count = response.total_count; // total data count.
                    console.log("paging success");
                    console.log( $scope.vm.users);
                    console.log( $scope.vm.total_count);
                } else {

                }
            }, function (error) {
                console.log(error);
            });

        };

上面的代码正在和我一起工作。