Question

我有一个输入文本，因此当用户输入一个名称并单击一个按钮时，会出现一个具有此名称的客户列表。

<body ng-app="myClientApp">
<div ng-controller="consulterctr">
<div>
<input type="text" ng-model="name"/>
<button ng-click="research()"></button>
</div>

<table class="table table-hover table-bordered" id="tab1">

     <thead>
        <tr class="row-name" >
           <th >Nom</th>
           <th>Prenom</th>
           <th>Code</th>
         </tr>
     </thead>
 <tbody>

    <tr class="row-content"  ng-repeat="cl in clientPD| startFrom:currentPage*pageSize | limitTo:pageSize">

           <td>{{cl.nomClient}}</td>
                <td>{{cl.prenomClient}}</td>
                <td>{{cl.codeClient}}</td>
        </tr>
        </tbody>
</table>

<div class="container spacer" style="margin-left: 0px; margin-bottom: 30px;">


    <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
        Précédent
    </button>
    {{currentPage+1}}/{{numberOfPages()}}
    <button ng-disabled="currentPage >= clientPD.length/pageSize - 1" ng-click="currentPage=currentPage+1">
        Next
    </button>
    </div>

</div>
</body>

这是angularsjs代码：

   app.controller("consulterctr", function ($scope,$http,$window,$route) {
        $scope.pageSize=4;
        $scope.currentPage=0;

    $scope.numberOfPages=function(){
            return Math.ceil($scope.clientPD.length/$scope.pageSize);                
        };

    $scope.research=function(){

            $http.get("/client/"+$scope.name)
            .then(function (response) {         
                $scope.clientPD=response.data;

            },function (error){
                console.log(error, 'can not get data.');
            }); 
        };
});
    app.filter('startFrom', function() {
        return function(input, start) {
            start = +start; //parse to int
            return input.slice(start);
        }
    });

分页工作完美，我可以浏览页面，但我发现只有一个问题。例如，如果我搜索Harry，这个名字有2页。如果我现在在第二页，我决定搜索大卫和大卫只有一页，当我点击搜索，我将得到一个空页面，当前页面仍然2，而不是返回到第一页，所以我必须返回页面一找到大卫的信息。感谢。

Answer 1

每次调用搜索功能时都应该重置currentPage，以便从第一页开始，否则因为

startFrom:currentPage*pageSize

如果当前页面不是0，则ng-repeat不会从第一项开始。

$scope.research=function(){  
    $http.get("/client/"+$scope.name).then(function (response) { 
        $scope.currentPage = 0;        
        $scope.clientPD=response.data;
    },function (error){
        console.log(error, 'can not get data.');
      }); 
    };
});

Demo

分页angularjs

1 个答案: