Question

我通过每页显示12条记录来传递后端请求，从而动态分页。在我的后端回复中，我有完全的计数。

$scope.TotalCount = res.response.data.Count;

基于此，我创建了分页。但现在我的问题是我的值显示在同一页面中。类似地，我调用了numpages()页面的加载，我希望在我的应用按钮ng-click = numpages();或单击数字来调用该函数时调用它。

   <div class="row col-sm-12 adjustNames">
         <div class="displayImgData col-sm-3" ng-repeat="item in profileData">
       <b class="imgData">{{item.fname}}<br>
             {{item.lname}}
        </b>
       </div>

             <div data-pagination="" data-num-pages="numPages()" 
  data-current-page="currentPage" data-max-size="maxSize"  
  data-boundary-links="true"></div>
</div>

JS：

    $scope.currentPage = 1;     
  $scope.numPerPage = 12;
  $scope.maxSize = 5;
 $scope.numPages = function () {
    return Math.ceil($scope.TalentCount/ $scope.numPerPage);
  };

$scope.$watch('currentPage + numPerPage', function() {
$scope.pagination = (($scope.currentPage - 1) * $scope.numPerPage);
  $scope.end = $scope.pagination + $scope.numPerPage;
$scope.pages = $scope.onloadFindTalent($scope.sortBy,$scope.pagination);
  });

OnloadFindTalent：

  $scope.onloadFindTalent= function(sortBy,pagination){

            $scope.profileData ="";

                   if(pagination == undefined){
                     pagination = 0;
                      }
                    if(sortBy == "asc"){
                     $scope.sortBy = "firstname";
                     $scope.sortType = sortBy;

                    }
                    if(sortBy == "desc"){
                        $scope.sortBy = "firstname";
                        $scope.sortType = sortBy;
                    }

            if($scope.sortBy == undefined && $scope.sortType == undefined){
                $scope.sortBy = "updatedtime";
                $scope.sortType = "asc";
            }
            var json =
                {
              "request": {
                "service": {
                  "servicetype": "3",
                  "functiontype": "3000",
                                 },
                "data": 

                  "roleInfo": {
                    "rolename": $scope.model.role,

                  },
                  "sort": {
                    "sortby": $scope.sortBy,
                    "sorttype": $scope.sortType
                  },
                  "records": {
                    "start_no":pagination,
                    "count": $scope.numPerPage
                  }
                }
              }
            }


           UserService.onloadFindTalent(json).then(function (res) {

               if(res.response.data.profilesearch.length > 0)

              {


               $scope.profileData = res.response.data.profilesearch;


          }
                });

Answer 1

试试这种概念

            <tbody>
                <tr ng-repeat="item in pagedItems[currentPage]">
                    <td>{{item.id}}</td>
                     .
                     .
                     .
                   </tr>
            </tbody>

             <tfoot>
                    <td colspan="6">
                        <div class="pagination pull-right">
                            <ul>
                                <li ng-class="{disabled: currentPage == 0}">
                                    <a href ng-click="prevPage()">« Prev</a>
                                </li>
                                <li ng-repeat="n in range(pagedItems.length)"
                                    ng-class="{active: n == currentPage}"
                                ng-click="setPage()">
                                    <a href ng-bind="n + 1">1</a>
                                </li>
                                <li ng-class="{disabled: currentPage == pagedItems.length - 1}">
                                    <a href ng-click="nextPage()">Next »</a>
                                </li>
                            </ul>
                        </div>
                    </td>
                </tfoot>

Demo

    $scope.itemsPerPage = 5;
    $scope.pagedItems = [];// list of objects 
    $scope.currentPage = 0;

 $scope.prevPage = function () {
        if ($scope.currentPage > 0) {
            $scope.currentPage--;
        }
    };

    $scope.nextPage = function () {
        if ($scope.currentPage < $scope.pagedItems.length - 1) {
            $scope.currentPage++;
        }
    };

   $scope.range = function (start, end) {
    var ret = [];
    if (!end) {
        end = start;
        start = 0;
    }
    for (var i = start; i < end; i++) {
        ret.push(i);
    }
    return ret;
  }; 

  $scope.setPage = function () {
        $scope.currentPage = this.n;
    };

分页错误，下一页值显示在同一页面中

1 个答案:

Demo