zoukankan      html  css  js  c++  java
  • angular js 分页

    一、编写实体类PageResult

    public class PageResult implements Serializable {
    private Long total;//总记录数
    private List rows;//当前页的结构

    public PageResult() {
    }

    public PageResult(Long total, List rows) {
    this.total = total;
    this.rows = rows;
    }

    public Long getTotal() {
    return total;
    }

    public void setTotal(Long total) {
    this.total = total;
    }

    public List getRows() {
    return rows;
    }

    public void setRows(List rows) {
    this.rows = rows;
    }
    }
    二、编写service
    //分页
    public PageResult findPage(Integer total,Integer rows);
    三、编写serviceImpl
    @Override
    public PageResult findPage(Integer total,Integer rows) {
    // 利用mybatis分页助手
    PageHelper.startPage(total,rows);
    Page<Brand> brandsList = (Page<Brand>) brandDao.selectByExample(null);
    return new PageResult(brandsList.getTotal(),brandsList.getResult());
    }
    四、编写controller
    //  分页查询
    @RequestMapping("/findPage")
    public PageResult findPage(Integer page, Integer rows){
    PageResult re = brandService.findPage(page, rows);
    return re;
    }
    五、编写页面html,引入相关的js,css
    var app=angular.module('pingyougou',['pagination']);
    app.controller('brandController',function($scope,$http){
    $scope.reloadList=function(){
    // 切换页码 第一个参数是当前页 第二个参数 :每页展示的数据条数
    $scope.findPage( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage);
    }
    // 分页控件配置
    $scope.paginationConf = {
    // 当前页
    currentPage: 1,
    // 默认总条数
    totalItems: 10,
    // 每页展示的条数
    itemsPerPage: 10,
    // 每页展示的多少条 下拉框 默认是10条 也可以手动选择
    perPageOptions: [10, 20, 30, 40, 50],
    onChange: function(){
    $scope.reloadList();//重新加载
    }
    };
    //切换页码 第一个参数是当前页 第二个参数 :每页展示的数据条数
    $scope.findPage=function(page,rows){
    $http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(
    function(response){
    // 返回的数据集合 List<Brand>
    $scope.list=response.rows;
    // 查询到的总记录数
    $scope.paginationConf.totalItems=response.total;//更新总记录数
    }
    );
    }
    }

    <tm-pagination conf="paginationConf"></tm-pagination>
  • 相关阅读:
    Linux查看所有用户用什么命令
    Sudoku Solver
    Restore IP Addresses
    Implement strStr()
    Insert Interval
    Recover Binary Search Tree
    First Missing Positive
    Rotate List
    Longest Palindromic Substring
    4Sum
  • 原文地址:https://www.cnblogs.com/zhangrongfei/p/11328274.html
Copyright © 2011-2022 走看看