angularjs分页

后台 

                                                

<!--分页需要的依赖-->

<!-- 分页 -->

<dependency>

<groupId>com.github.pagehelper</groupId>

<artifactId>pagehelper</artifactId>

<version>4.0.0</version>

</dependency>

在SqlMapConfig.xml中配置

<!-- 配置分页插件 -->
<plugins>
<plugin interceptor="com.github.pagehelper.PageHelper">
<!-- 设置数据库类型 Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL六种数据库-->
<property name="dialect" value="mysql"/>
</plugin>
</plugins>

在controller层

@RequestMapping(value="selectAll",method=RequestMethod.POST)
@ResponseBody
public  PageInfo<ShoppingCar>  selectAll(String pageNo, String pageSize,String name){
//初始化数值
        int num = 1;
        int size = 5;


        if(pageNo != null && !"".equals(pageNo)) {
            num = Integer.parseInt(pageNo);
        }
        if (pageSize != null && !"".equals(pageSize)) {
            size = Integer.parseInt(pageSize);
        }
        //开始分页
        PageHelper.startPage(num,size);
        if (name==null) {
         //查询数据库信息
    List<ShoppingCar> list = shoppingCarService.selectAll();
    //将信息放入PageInfo进行分页
            PageInfo<ShoppingCar> pageInfo = new PageInfo<ShoppingCar>(list);
    return pageInfo;
}else{
List<ShoppingCar> list = shoppingCarService.selectLikeName(name);
    //将信息放入PageInfo进行分页
            PageInfo<ShoppingCar> pageInfo = new PageInfo<ShoppingCar>(list);
    return pageInfo;
}
      
}

                                      前台用angularjs填充页面

                                         <script>
                        var app = angular.module('myApp', []);
app.controller('myController', function($scope, $http) {
 $http.post("http://localhost:8080/ShoppingCar/selectAll")
 .success(function (response) {
 $scope.data = response.list;
     $scope.pageHelper= response;
 
 });

$scope.head = function() {
   var firstPage =$scope.pageHelper.firstPage;
var pageSize = $scope.pageHelper.pageSize
  $http.post("http://localhost:8080/ShoppingCar/selectAll?pageNo="+firstPage+"&pageSize="+pageSize)
 .success(function (response) {
 $scope.data = response.list;
     $scope.pageHelper= response;
 
 });
   };
   
    $scope.last = function() {
   var lastPage =$scope.pageHelper.lastPage;
var pageSize = $scope.pageHelper.pageSize
  $http.post("http://localhost:8080/ShoppingCar/selectAll?pageNo="+lastPage+"&pageSize="+pageSize)
 .success(function (response) {
 $scope.data = response.list;
     $scope.pageHelper= response;
 });
   };
    $scope.shang = function() {
   var prePage =$scope.pageHelper.prePage;
var pageSize = $scope.pageHelper.pageSize
  $http.post("http://localhost:8080/ShoppingCar/selectAll?pageNo="+prePage+"&pageSize="+pageSize)
 .success(function (response) {
 $scope.data = response.list;
     $scope.pageHelper= response;
 });
   };
     $scope.next = function() {
   var nextPage =$scope.pageHelper.nextPage;
var pageSize = $scope.pageHelper.pageSize
  $http.post("http://localhost:8080/ShoppingCar/selectAll?pageNo="+nextPage+"&pageSize="+pageSize)
 .success(function (response) {
 $scope.data = response.list;
     $scope.pageHelper= response;
 });
   };

              });
</script>

                                      <label class=" control-label">共<span>{{pageHelper.total}}条记录当前显示</span><span>现在显示第{{pageHelper.pageNum}}页</span></label>
        <button class="btn btn-default" ng-click="head()">首页</button>
<label ng-if="pageHelper.isFirstPage == true">
       <button class="btn btn-default" ng-click="head()">上一页</button>
   </label>
   <label ng-if="pageHelper.isFirstPage == false">
       <button class="btn btn-default" ng-click="shang()">上一页</button>
   </label>


<label ng-if="pageHelper.isLastPage == true">
<button class="btn btn-default" ng-click="last()">下一页</button>
</label>
  <label ng-if="pageHelper.isLastPage == false">
      <button class="btn btn-default" ng-click="next()">下一页</button>
  </label>
<button class="btn btn-default" ng-click="last()">尾页</button>