mybatis-paginator插件学习笔记

最新推荐文章于 2024-04-27 09:51:55 发布

转载最新推荐文章于 2024-04-27 09:51:55 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/don1911/p/8450259.html

文章标签：

#java #javascript #ViewUI

本文介绍了一个基于MyBatis的分页插件mybatis-paginator的使用方法，包括后端SSM框架整合、具体接口实现及前端分页展示，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　效果图 :

mybatis-paginator下载地址：https://github.com/miemiedev/mybatis-paginator

　　使用示例：https://my.oschina.net/miemiedev/blog/135516

后台: ssm + mybatis-paginator插件

package com.controller;

import java.util.*;

@Controller
@RequestMapping("/user")
public class UserController{
    @Autowired
    private UserService userSer;
    
    //获取全部用户
    @RequestMapping(value="userList")
    private ModelAndView userList(ModelAndView modelAndView){
        PageBounds pageBounds = new PageBounds(1, 6);    //默认显示前6条
        Map<String, Object> userParam = new HashMap<>();
        PageList<UserInf> userList = userSer.findUsers(userParam, pageBounds);
        int pageNum = userList.getPaginator().getTotalPages();　　//总页码数
        modelAndView.addObject("pageNum", pageNum);
        modelAndView.addObject("userList", userList);
        modelAndView.setViewName("userList");
        return modelAndView;
    }
    
    //获取符合条件的用户
    @RequestMapping(value="userListPage",produces = "text/html; charset=utf-8")     //此处设置produces防止数据返回到前台时中文乱码
    //Spring对返回值映射时找不到对应的视图，所以返回404; 需要用@RequestBody
    private @ResponseBody String findUsers(Integer page, Integer pageSize){        
        String sortString = "user_id.asc";
        Map<String, Object> userParam = new HashMap<>();
        //userParam.put("email", "");
        if(page == null) page = 1;
        if(pageSize == null) pageSize = 6;
        PageBounds pageBounds = new PageBounds(page, pageSize, Order.formString(sortString));
        PageList<UserInf> userList = userSer.findUsers(userParam, pageBounds);
        int pageNum = userList.getPaginator().getTotalPages(); 
        String res = JSONArray.fromObject(userList).element(userList.size(), "{pageNum:"+pageNum+"}").toString();
        return res;
    }
}

Service接口：

import java.util.*;

import com.github.miemiedev.mybatis.paginator.domain.PageBounds;
import com.github.miemiedev.mybatis.paginator.domain.PageList;
import com.po.UserInf;

public abstract class UserService {
    //多个用户查询
    public abstract PageList<UserInf> findUsers(Map<String, Object> email, PageBounds pageBounds); 
}

mapper 中自定义的sql查询语句：

  <!-- 自定义sql动态查询片段 -->
  <sql id="selectPage_whereCondition">
      <if test="params!=null and params.size()>0">
          <if test="params.get('id')!=null">
              and user_id = #{params.id}
          </if>
          <if test="params.get('name')!=null">
              and user_name like concat('%',trim(#{params.name}),'%')
          </if>
          <if test="params.get('email')!=null">
              and user_email like concat('%',trim(#{params.email}),'%')
          </if>
          <if test="params.get('password')!=null">
              and user_email like concat('%',trim(#{params.email}),'%')
          </if>
      </if>
  </sql>
  
  <!-- 自定义分页查询语句 -->
  <select id="selectPage" parameterType="map" resultMap="BaseResultMap">
      select * from user_inf 
      <where>
          <include refid="selectPage_whereCondition"></include>
      </where>
  </select>

前台 : bootstrapPaginator插件

本项目中略做了修改(384页处)：“首页”，“上一页”，“下一页”，“末页”标签一直显示。当显示页面为第一页时，“上一页”按钮“不可点击”；“下一页”同理。

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test for Paginator</title>
    <link rel="stylesheet" href="../re/JsAndCss/bootstrap.css">
</head>
<style>
*{
    font-family : Sans-serif, 'Helvetica Neue', Helvetica, Arial;
}
th, td{
    text-align : center;
}
.nice{
    color : red;
    font-size : 30px;
    background-color : orange;
}
</style>
<body>
<div class="container">
    <div class="well" style="text-align:center;color:orange;">
        <h4>用户信息</h4>
    </div>
    <div class="table-responsive">
        <table class="table table-striped table-bordered table-hover">
            <thead>
                <tr style="text-align:center">
                    <th>用户Id</th> 
                    <th>用户名</th>
                    <th>用户密码</th>
                    <th>用户邮箱</th>
                </tr>
            </thead>
            <tbody id="mytbody">
                <c:forEach items="${userList }" var="user">
                    <tr style="text-align:center">
                        <td>${user.userId }</td>
                        <td>${user.userName }</td>
                        <td>${user.userPassword }</td>
                        <td>${user.userEmail }</td>
                    </tr>
                </c:forEach>
            </tbody>
            
        </table>
    </div>
    
    <div style="text-align:center"> 
        <ul id="myPaginator"></ul> 
    </div>
    
</div>
</body>
<script type="text/javascript" src="../re/JsAndCss/jquery.min.js"></script>
<script type="text/javascript" src="../re/JsAndCss/bootstrap.js"></script>
<script type="text/javascript" src="../re/JsAndCss/bootstrap-paginator.js"></script>
<script>
    
     $("#myPaginator").bootstrapPaginator({
        bootstrapMajorVersion : 3,        //版本声明   版本为3时父标签须为ul, 版本为2时父标签须为div
        /* pageUrl : function(type, page, current){        //超链接
            return "userListPage.action?page="+page+"&pageSize=6";
        }, */
        size : "normal",                //控件大小
        alignment : "center",            //控件对齐方式
        itemContainerClass : function(type, page, current){        //设置ul的class(名)
            var res = "";
            switch (type) {
            case "prev":
                if(current == 1)
                    res = "disabled";
                break;   
            case "next":
                if(current == this.totalPages)
                    res = "disabled";
                break;
            case "page": 
                if(page == current) 
                    res = "active";    
                break;
            }
            return res;
        },  
        itemContentClass : function(type, page, current){        //设置li的class
        },
        currentPage : 1,                //当前页
        numberOfPages : 5,                //控件显示的页码数 
        totalPages : '${pageNum}',        //总页数
        shouldShowPage : true,            //或为function(type,page,current){return "true"};
        itemTexts : function (type, page, current){
            switch(type){
            case "first":
                return "首页";
            case "prev":
                return "上一页";
            case "next":
                return "下一页";
            case "last":
                return "末页";
            case "page":
                return page;
            }                
        },
        tooltipTitles : function(type, page, current){        //提示信息
            if(type=="page" && page == current){
                return "正在展示第" + current + "页";
            }
            switch(type){
            case "first":
                return "跳至首页";
            case "prev":
                return "跳至上一页";
            case "next":
                return "跳至下一页";
            case "last":
                return "跳至尾页";
            case "page":
                return "跳至第"+page+"页";
            }
        },
        useBootstrapTooltip : true,            //是否使用bootstrap内置tooltip
        bootstrapTooltipOptions : {
            animation : true,
            html : false,
            placement : "bottom",
            trigger : 'hover',    //如何触发提示工具 触发器用空格分隔
            delay : { show : 0, hide : 0}            
        },
        onPageClicked : function (event, originalEvent, type, page){    //点击按钮
            var pages = $(this).bootstrapPaginator('getPages');
            var current = pages.current;    //当前页页码,即点击事件发生时所在页面
            var last = pages.last;            //最后一页页码
            if(type=='prev'&&current==1) return;
            if(type=='next'&&current==last) return; 
             $.ajax({
                type : 'post',
                url : '../user/userListPage.action',
                data : {page:page, pageSize:6},
                dataType : 'json',
                success : function(mes){
                     $('#mytbody').empty();
                    for(var key in mes){
                        var res = mes[key];
                        if(res.pageNum!=null){
                            //$('#myPaginator').bootstrapPaginator('setOptions', {totalPages : res.pageNum});
                            return;
                        }
                        $('#mytbody').append('<tr><td>'+res.userId+'</td><td>'+res.userName                                
                                +'</td><td>'+res.userPassword+'</td><td>'+res.userEmail+'</td></tr>');                         
                    }                      
                },
            }); 
        },
        onPageChanged : function (event){    //页码改变后触发            
        }
    }); 

</script>
</html>