angular入门--分页

来源：互联网发布：mc怎么知道网络lp 编辑：程序博客网时间：2024/06/06 20:31

前端

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...}返回的javaBeanpublic class ResponseMessage {    private int  code;    private Object data;    private String msg;}

阅读全文

0 0

angular入门--分页

目录

前端

js代码

服务器端代码