angular入门--分页

最新推荐文章于 2020-02-27 21:15:08 发布

TNT_xy

最新推荐文章于 2020-02-27 21:15:08 发布

阅读量433

点赞数

文章标签： angular

本文链接：https://blog.csdn.net/sinat_27639721/article/details/73274836

版权

web入门专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前端

pagination是bootstrap或者jquery自带的一个插件，所以你需要下载他们被页面引入，

<html>
 查询框中的内容
<input type="text"
ng-model="param.name"
class="form-control" id="firstname1" placeholder="请输入名字">
 查询按钮
<button type="submit"
class="btn btn-default"  ng-click="loadPage()" >查询</button>


<pagination total-items="a.atotal" <!-- 查询出的数据总数-->
 ng-model="a.anum"  
items-per-page="a.asize" <!--每一页的数量 -->
max-size="5" <!--最多显示几个 -->
rotate="false"
ng-change="loadPage()" <!--你写的方法-->
boundary-links="true"
class="pagination-sm m-t-sm m-b pull-right"
next-text=">>"
previous-text="<<">
</html>

js代码

算是比较复杂

    $scope.datalist=[];  //查询出来的数据，暂时不赋值
    $scope.pagedata={  // 服务器使用 mybatis的分页插件PageInfo，返回的json数据格斯
        pageNum: '',
        pageSize: '1',
        size: '5',
        startRow: '',
        endRow: '',
        total: '',
        pages: '',
        data:$scope.datalist  // 这里是 分页得出的数据
    };
    // 仅仅只是分页的参数 配合 前端的分页插件
    $scope.a={
        anum:1, // 第几页
        asize:5, // 一页的数量
        atotal:5
    };
    $scope.loadPage = function () {
        $scope.selectList($scope.a.anum);
    };
   // 分页参数 和 其他参数在一起的拼接
    $scope.param = {
        name : '',  // 就是 上面的输入框
        pageIndex : $scope.a.anum, 
        pageSize : $scope.a.asize

    };
 $scope.selectList=function (pagedata) {
        console.log($scope.param.name);
        $scope.param.pageIndex=pagedata; call_api.post('/api/User/XXX',$scope.param ,function(data){
            $scope.pagedata=data.data;//
            $scope.datalist=data.data.list;// 这个就是查询出来的分页后数据
            $scope.a.atotal=data.data.total;// 这个很重要
        });
    };

服务器端代码

 public @ResponseBody ResponseMessage getUserLists(
            @RequestBody  UserInfoVo item) {
       // 自定义的返回javaBean
        ResponseMessage responseMessage=new ResponseMessage();
        // 获取列表并且分页,这是 mybatis的PageHelper分页插件 PageHelper.startPage(item.getPageIndex(),item.getPageSize());
        List<TbUser> userList = userService.getUserList(item);
        PageInfo<TbUser> pageInfo=new PageInfo<TbUser>(userList);
        if(!pageInfo.getList().isEmpty()){ 
            responseMessage.setData(pageInfo);
        }else{
            //没有数据，自己写业务逻辑
             }
        return  responseMessage;
    }

传入参数的VOentity

public class UserInfoVo{
   private int pageIndex；

   private int pageSize；

   private String name；

   getter ...setter...
}
返回的javaBean
public class ResponseMessage {

    private int  code;
    private Object data;
    private String msg;

}