分页器Pagerhelper

分页器Pagerhelper

其中的属性

    //当前页
    private int pageNum;
    //每页的数量
    private int pageSize;
    //当前页的数量
    private int size;
 
    //由于startRow和endRow不常用，这里说个具体的用法
    //可以在页面中"显示startRow到endRow 共size条数据"
 
    //当前页面第一个元素在数据库中的行号
    private int startRow;
    //当前页面最后一个元素在数据库中的行号
    private int endRow;
 
    //总记录数
    private long total;
    //总页数
    private int pages;
    //结果集
    private List<T> list;
 
    //前一页
    private int prePage;
    //下一页
    private int nextPage;
    //是否为第一页
    private boolean isFirstPage;
    //是否为最后一页
    private boolean isLastPage;
    //是否有前一页
    private boolean hasPreviousPage;
    //是否有下一页
    private boolean hasNextPage;
    //导航页码数
    private int navigatePages;
    //所有导航页号
    private int[] navigatepageNums;
    //导航条上的第一页
    private int navigateFirstPage;
    //导航条上的最后一页
    private int navigateLastPage;
 
    public PageInfo() {
        this.isFirstPage = false;
        this.isLastPage = false;
        this.hasPreviousPage = false;
        this.hasNextPage = false;
    }            

mapper

@Mapper
public interface UserMapper {
    @Select("select user_name as userName,password,status from user")
    List<UserBean> getList(RowBounds rowBounds);
    @Select("select count(id) from user")
    Integer getCount();

}

service

interface

public interface UserService {
//    Page getList(Integer page, Integer recPerPage);
     PageInfo getList(Integer page, Integer recPerPage);

}

impl

//    @Override
//    public Page getList(Integer page, Integer recPerPage) {
//        Page resultPage = new Page();
//        resultPage.setResult("success");
//        if(page<=0)page=1;
//        Integer offset = (page-1)*recPerPage;
//        RowBounds rowBounds = new RowBounds(offset,recPerPage);
//        List<UserBean> userList = userMapper.getList(rowBounds);
//        resultPage.setData(userList);
//        Pager pager = new Pager();
//        pager.setPage(page);
//        pager.setPage(recPerPage);
//        pager.setRecTotal(userMapper.getCount());
//        resultPage.setPager(pager);
//        return resultPage;
//    }
    @Override
    public PageInfo getList(Integer page, Integer recPerPage) {
        if(page<=0)page=1;
        Integer offset = (page-1)*recPerPage;
        RowBounds rowBounds = new RowBounds(offset,recPerPage);
//        PageHelper.startPage(offset,recPerPage);
        List<UserBean> userList = userMapper.getList(rowBounds);
        PageInfo pageInfo = new PageInfo(userList);
        //总页数
        if(userMapper.getCount() / recPerPage == 0)
            pageInfo.setPages(userMapper.getCount() / recPerPage);
        else  pageInfo.setPages(userMapper.getCount() / recPerPage +1);
        //当前页
        pageInfo.setPageNum(page);
        //总数
        pageInfo.setTotal(userMapper.getCount());
        //下一页
        pageInfo.setNextPage(page +1);
        //上一页
        if(page >1 )
           pageInfo.setPrePage(page -1);
        else  pageInfo.setPrePage(1);
//        最后和第一页  NavigatePages:所有的导航页 默认显示八个，导航最多八个
        pageInfo.setNavigateFirstPage(1);
        pageInfo.setNavigateLastPage(pageInfo.getPages());
        return pageInfo;

    } 

controller

 @RequestMapping("/user_list")
  public String  getUserList(Integer page,Integer recPerPage){
      // ApplicationContext context =new ClassPathXmlApplicationContext("spring-mybatis.xml");
     // UserService userService = (UserService) context.getBean("userServiceImpl");
      //Integer page = Integer.parseInt(req.getParameter("page")) ;
      //Integer recPerPage = Integer.parseInt(req.getParameter("recPerPage"));

      PageInfo page1 = userService.getList(page,recPerPage);
      //System.out.println(page1);
     // String result = JSONObject.toJSONString(page1);
      return result;

  }

前端页面

    createApp({
        data() {
            return {
                message: 'Hello Vue!',
                username: "",
                password: "",
                index: "",
                length: '',
                pageInfo: {
                    total: "",
                    startRow: 0,
                    size: "",
                    prePage: "",
                    pages: "",
                    pageSize: "",
                    pageNum: "",
                    nextPage: "",
                    navigatepageNums: "",
                    navigatePages: "",
                    navigateLastPage: "",
                    navigateFirstPage: "",
                    isLastPage: "",
                    isFirstPage:"",
                    hasPreviousPage:"",
                    hasNextPage:""
                },
                list: {
                    userName:"",
                    password:"",
                    status:""
                },
                cols: [
                    "用户名","密码","状态"
                ],
                array: ""
            }
        },
        methods: {
            //请求数据
            getlist(page, recperpage){
                console.log(page)
                axios.get("/IdeaProject_1_0_SNAPSHOT_war/user_list",{
                    params:{
                        page: page,
                        recPerPage:recperpage
                    }
                }).then(response => {
                    console.log(response.data)
                    this.array = response.data.list;
                    this.pageInfo.total = response.data.total;
                    this.pageInfo.pageNum = response.data.pageNum;
                    this.pageInfo.prePage = response.data.prePage;
                    this.pageInfo.nextPage = response.data.nextPage;
                }).catch(err =>{
                    console.log(err)
                })
            },
            next(){
                this.getlist(this.pageInfo.nextPage, this.pageInfo.size)
            },
            pre(){
                this.getlist(this.pageInfo.prePage, this.pageInfo.size)
            },
            goto(i){
                this.getlist(i, this.pageInfo.size)
            },
        mounted() {
            axios.get("/IdeaProject_1_0_SNAPSHOT_war/user_list",{
                params:{
                    page: 1,
                    recPerPage:4
                }
            }).then(response => {
                    console.log(response.data)
                    this.array = response.data.list;
                    this.length = response.data.list.length;
                    this.pageInfo.total = response.data.total;
                    this.pageInfo.pageNum = response.data.pageNum;
                    this.pageInfo.prePage = response.data.prePage;
                    this.pageInfo.nextPage = response.data.nextPage;
                    this.pageInfo.pageSize = response.data.pageSize;
                    this.pageInfo.size = response.data.size;
                    this.pageInfo.navigateFirstPage = response.data.navigateFirstPage;
                    this.pageInfo.navigateLastPage = response.data.navigateLastPage;
                    console.log(this.pageInfo)


                }).catch(err =>{
                    console.log(err)
            })
        }

    }).mount('#app')

主页面

        <div class="panel-body panel-info">
            <!-- <div id="mydatagrid" class="datagrid datagrid-striped"> -->
            <table class="table">
                <thead>
                <tr>
                    <th v-for="(item, index) in cols">
                        {{item}}
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
                </thead>
                <tbody>

                <tr v-for="(item, index) in array" v-bind:key="item.id">
                    <td>{{item.userName}}</td>
                    <td>{{item.password}}</td>
                    <td>{{item.status}}</td>

                    <td>
                        <button class='btn btn-sm btn-info modify' @click="get(index)">修改</button> <button
                            class='btn btn-sm btn-danger delete' @click="del(index)">删除</button>
                        <button class='btn btn-sm btn-info detail' @click="detail(index)">查看详情</button>
                    </td>
                </tr>

                </tbody>
            </table>
            <ul class="pager" >
                <li class="previous">
                    <button href="your/nice/url" @click="pre()">«</button>
                </li>
                <li  v-for="i in pageInfo.navigateLastPage">
                    <button href="your/nice/url" @click="goto(i)">{{i}}</button>
                </li>
                <li class="next">
                    <button href="" @click="next()">»</button>
                </li>
            </ul>
            <!-- </div> -->
        </div>
    </div>

页面