欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Mybatis 带条件的前后端分页查询(pageHelper + pagination)

程序员文章站 2024-03-20 20:09:16
...

目标

以分页的形式把管理员信息显示到页面上 特殊需求:后端兼顾带关键词查询或者不带关键词查询,为了方便代码不冗余,写一个接口,后端采用PageHelper插件,前端采用Pagation分页插件

思想

这里以Admin为例, 梳理大致流程

1.编写AdminController.getPage(pageNum,pageSize,keyWord,modelMap);
这里注意,如何灵活的携带关键词或者不携带关键词进行分页查询 ,需要给keyWord设置一个默认值,默认为空
2. 在Controller中调用

 PageInfo<Admin>  pagInfo = AdminService.gePage(pageNum,pageSize,keyWord);
  1. 将pageInfo存入ModelMap 模型
  2. 重定向到页面中。
  3. 在Service层 通过PageHelper.startPage(pageNum,pageSize);进行分页
  4. 通过调用AdminMapper.selectAdminByKeyWord(keyWord);
  5. 编写Sql语句,通过like模糊查询 将keyword通过sql函数 concat连接字符串 w
select * from admin where name like concat("%",#{keyWord},"%") 

8.返回pageInfo

代码实现

后端

AdminController

 /**
     * 带关键词或者不带关键词的分页查询
     * @param pageNum
     * @param pageSize
     * @param keyWord
     * @return 返回到admin-page页面
     */
    @RequestMapping("/admin/page.html")
    public String getAdminPage(@RequestParam(value = "pageNum",defaultValue = "1") Integer pageNum,
                               @RequestParam(value = "pageSize",defaultValue = "5") Integer pageSize,
                               //当keyWord为默认值空时,就代表不带条件的分页查询
                               @RequestParam(value = "keyWord",defaultValue = "") String keyWord,
                               ModelMap modelMap){

        // 带关键词的查询
        PageInfo<Admin> pageInfo = adminService.getAdminPage(pageNum,pageSize,keyWord);
        // 将查询到的结果存入模型
        modelMap.addAttribute(CrowdConstant.ATTR_NAME_PAGE_INFO,pageInfo);
        return "admin-page";
    }

AdminService

 /**
     * 带条件或者不带条件的分页查询
     * @param pageNum
     * @param pageSize
     * @param keyWord
     * @return
     */
    @Override
    public PageInfo<Admin> getAdminPage(Integer pageNum, Integer pageSize, String keyWord) {

        // 分页,调用pageHelper插件的startPage()静态方法
        PageHelper.startPage(pageNum,pageSize);
        // 调用AdminMapper进行条件查询
        List<Admin> adminList = adminMapper.selectAdminListByKeyword(keyWord);
        // 返回pageInfo对象
        return new PageInfo<>(adminList);
    }

以上就是后端的代码

前端采用第三方插件 Pagination

首先 需要下载Pagination并且在项目中引入,该插件是依赖于jQuery的,所以需要先引入jQuery

  1. 在需要的页面引入相关css和jquery

2.编写Pagination js代码

<script>
	$(function){
		initPagation();
}

// 初始化分页
function initPagation(){
   //  获取总页数
   var totalRecord = ${requestScope.pageInfo.total};
   // 调用分页导航条对应的jQuery对象的pagination()方法进行分页
   // totalRecord 总页数   jsonObject json对象
   $("#pagination").pagination(totalRecord,jsonObject)
}

// json对象
var jsonObject = {
   	   items_per_page:${requestScope.pageinfo.pageSize},   //每页显示的记录数
       //Pagation插件的当前页 是page_index, 是从0开始的, PageInfo对象的当前页是从1开始的,
       current_page:${requestScope.pageinfo.pageNum-1},    // 当前页码, PageInfo对象是从1开始的,Pagation插件是从0开始的
       num_edge_entries: 3,                                // 边缘页数    123  ... 455678... 91011
       prev_text: "上一页",                                   // 上一页按钮显示的文本
       next_text: "下一页",                                   // 下一页按钮显示的文本
       callback: pageSelectCallback,                       // 回调函数,当用户进行"翻页",系统给出的响应
       num_display_entries: 5                            // 主体页数
}

/**
    * 当用户点击"上一页、下一页、1、2、3"时的功能
    * @param pageIndex
    * @param jQuery
    */
function pageSelectCallback(pageIndex,jQuery){
   // 定义pageNum  PageInfo中的pageNum是从第一页开始的,Pagation的第一页是从0开始的,所以 pageNum = pageINdex + 1;
   var pageNum = pageIndex + 1;
   // 跳转页面
   window.location.href = " 和后端接口对应?pageNum=“ + pageNum +"&keyWord=${param.keyWord}" ;
   // 取消当前超链接的默认行为
   return false;
}
</scipt>

至此,前后端的带条件的分页功能完成。 !