分页器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;
//    }@Overridepublic 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> <buttonclass='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>

页面

分页器Pagerhelper相关推荐

uni-app 之使用扩展组件（uni ui） Pagination 分页器使用示例
先贴出分页器文档的地址: Pagination 分页器使用步骤: 1.下载或者导入插件到你的项目: 2.在需要使用的页面引入该插件. 使用操作: 1.下载或者导入插件到你的项目: 导入的操作流程示 ...
ajax分页node,分页数据（使用 paginate 方法）《 Node.js 应用：分页器》
先访问一下我们的网站上的 posts 这个页面 .. 这个是一个内容列表页面 ... 它会显示网站里面的所有的 posts 内容 .. 现在我要给这个页面添加一个分页器,可以分页显示内容 .. 先得去 ...
Django 分页器模板
返回链接: djang ORM 分页器模板: class Pagination(object):def __init__(self,current_page,all_count,per_page_nu ...
Django - 分页器
一.分页器: 知识点先览 Paginator:Django分页器bulk_create:批量插入数据paginator.count:数据总数,其中paginator是分页器实例化对象paginator ...
Django框架----分页器（paginator）
Django的分页器(paginator) view.py from django.shortcuts import render,HttpResponse# Create your views he ...
page 怎么把list 分页_自定义分页器的实现
前言 django也有自带额分页器,但是功能较少,使用起来较为繁琐.所以我们可以使用自定义非分页器. 自定义分页器的推导思路 # queryset对象是支持索引切片操作的(不支持负数索引) book_ ...
python 全栈开发，Day79(Django的用户认证组件,分页器)
一.Django的用户认证组件用户认证 auth模块在进行用户登陆验证的时候,如果是自己写代码,就必须要先查询数据库,看用户输入的用户名是否存在于数据库中: 如果用户存在于数据库中,然后再验证用户 ...
Web框架之Django_07 进阶操作（MTV与MVC、多对多表三种创建方式、前后端传输数据编码格式contentType、ajax、自定义分页器）
阅读目录一.MVC与MTV 二.多对多表的创建三.ajax,前后端传输编码格式contentType 四.批量插入数据与自定义分页器摘要 MTV与MVC 多对多表三种创建方式 ajax ,前后端 ...
element ui分页怎么做_Vue Element分页器
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>分页& ...

分页器Pagerhelper

这里写自定义目录标题

分页器Pagerhelper

其中的属性

mapper

service

interface

impl

controller

主页面

页面

分页器Pagerhelper相关推荐

最新文章

热门文章