一，SSM中分页的使用
在java中分页一直是我不敢触及的一部分。本次博客全面剖析一下SSM框架如何实现分页。
二，效果展示
点击前一页后一页首页或者尾页或者是跳转都是静态的实现。
三，表单的实现
3.1，前端代码
listByajax.jsp
<body> <div>总记录数：<span id="totalCount"></span>总页数：<span id="totalPageCount"></span></div> <table id="tableTbl" border="1"> <thead> <tr> <td>编号</td> <td>姓名</td> <td>年龄</td> <td>年级</td> <td>图片</td> <td>日期</td> <td colspan="2" style="text-align: center">操作</td> <button type="button" onclick="addByajaxBut()">添加</button> </tr> </thead> <tbody id="databody"> <!-- 数据行动态生成 --> </tbody> </table> <div> <button type="button" onclick="shouPage()">首页</button> <button type="button" onclick="upPage()">上一页</button> <input type="text" id="currPageNo" style="width: 15px;height: 24px" onblur="inpFenye()"> <button type="button" onclick="nextPage()">下一页</button> <button type="button" onclick="weiPage()">页尾</button> </div> </body>
3.2，Ajax的实现
<script src="/js/jquery.js"></script> <script> let currPageNo = 1; $(function (){ currPageNo = 1; refreshTablo(currPageNo) }) // 分页查询 function refreshTablo(currPageNo){ // console.log(0) $.ajax({ url:"/byajaxController/getByajaxlimit", // 后端查询数据接口的URL type:"post", data:{"currPageNo":currPageNo}, dataType:"json", success:function (result){ console.log(result) document.getElementById("totalCount").innerHTML=result.totalCount; document.getElementById("totalPageCount").innerHTML=result.totalPageCount; document.getElementById("currPageNo").value=result.currPageNo; // 清空表格数据 $("#databody").empty(); // 动态生成表格数据 var Mybody = $("#databody") Mybody.html(""); for (var i=0;i<result.byajaxs.length;i++){ var item = result.byajaxs[i]; console.log(item) var tr = document.createElement("tr"); tr.innerHTML="<td>" + item.id + "</td>" + "<td> " + item.byname + " </td>" + "<td> " + item.byage + " </td>" + "<td> " + item.bygrade + " </td>" + "<td> " + item.bypicture + " </td>" + "<td> " + item.bydate + " </td>" + "<td><button type='button' class='updateBtn' οnclick='updatefu("+ item.id +")'>修改</button></td>" + "<td><button type='button' class='deleteBtn' data-id=' " + item.id + " '>删除</button></td>" Mybody.append(tr) } } }) } //分页的一些方法 function upPage(){ if (currPageNo<=1){ alert("已经是首页了") }else { currPageNo=currPageNo-1; refreshTablo(currPageNo); } } function nextPage(){ if (currPageNo>=parseInt($("#totalPageCount").html())){ alert("已经是尾页了") }else { currPageNo=currPageNo+1; refreshTablo(currPageNo); } } function shouPage(){ currPageNo=1; refreshTablo(currPageNo); } function weiPage(){ currPageNo=parseInt($("#totalPageCount").html()); refreshTablo(currPageNo); } function inpFenye(){ currPageNo=parseInt($("#currPageNo").val()); if (currPageNo<1||currPageNo>parseInt($("#totalPageCount").html())){ alert("没有此页码") currPageNo=1 refreshTablo(currPageNo) }else { refreshTablo(currPageNo); } } $(document).ready(function (){ refreshTablo(); }) </script>
3.3，配置好page(用于显示条数，页数等)和Byajax（实体类）
until包下：page.java
package com.xinxi2.until; import com.xinxi2.bean.Byajax; import java.util.List; public class Page { private int totalPageCount = 0; //总页数 计算 根据每页展示记录数和记录总数计算出来的 private int pageSize = 10; //每页展示记录数。用户指定，通常有默认值 private int totalCount; // 记录总数。 数据库查询 private int currPageNo = 1; //当前页码 用户指定，默认显示第一页 private List<Byajax> Byajaxs; //每页微博集合 数据库查询 public List<Byajax> getByajaxs() { return Byajaxs; } public void setByajaxs(List<Byajax> byajaxs) { Byajaxs = byajaxs; } public int getTotalPageCount() { // 总页数计算 if (totalCount%pageSize==0){ return totalCount/pageSize; }else { return totalCount/pageSize+1; } } public void setTotalPageCount(int totalPageCount) { this.totalPageCount = totalPageCount; } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } public int getTotalCount() { return totalCount; } public void setTotalCount(int totalCount) { this.totalCount = totalCount; } public int getCurrPageNo() { return currPageNo; } public void setCurrPageNo(int currPageNo) { this.currPageNo = currPageNo; } }
Byajax.java
package com.xinxi2.bean; import com.alibaba.fastjson.annotation.JSONField; import org.springframework.format.annotation.DateTimeFormat; import java.util.Date; public class Byajax { /** */ private Integer id ; /** */ private String byname ; /** */ private String byage ; /** */ private String bygrade ; /** */ private String bypicture ; /** */ @DateTimeFormat(pattern="yyyy-MM-dd") // String 转 Date 视图到控制层 @JSONField(format = "yyyy-MM_dd") private Date bydate ; /** */ public Integer getId(){ return this.id; } /** */ public void setId(Integer id){ this.id=id; } /** */ public String getByname(){ return this.byname; } /** */ public void setByname(String byname){ this.byname=byname; } /** */ public String getByage(){ return this.byage; } /** */ public void setByage(String byage){ this.byage=byage; } /** */ public String getBygrade(){ return this.bygrade; } /** */ public void setBygrade(String bygrade){ this.bygrade=bygrade; } /** */ public String getBypicture(){ return this.bypicture; } /** */ public void setBypicture(String bypicture){ this.bypicture=bypicture; } /** */ public Date getBydate(){ return this.bydate; } /** */ public void setBydate(Date bydate){ this.bydate=bydate; } }
3.4，Mapper.xml中查询数据
ByajaxMapper.java
package com.xinxi2.dao; import com.xinxi2.bean.Byajax; import org.apache.ibatis.annotations.Param; import java.util.List; public interface ByajaxMapper { int getByajax(); List<Byajax> getByajaxlimit(@Param("currPageNo") int currPageNo,@Param("pageSize") int pageSize); List<Byajax> getlistByajax(Byajax byajax); }
ByajaxMapper.xml
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.xinxi2.dao.ByajaxMapper"> <resultMap id="Byajaxinto" type="com.xinxi2.bean.Byajax"> <id property="id" column="id"></id> <result property="byname" column="byname"></result> <result property="byage" column="byage"></result> <result property="bygrade" column="bygrade"></result> <result property="bypicture" column="bypicture"></result> <result property="bydate" column="bydate"></result> </resultMap> <select id="getByajax" resultType="java.lang.Integer" parameterType="com.xinxi2.bean.Byajax"> select count(1) from byajax </select> <select id="getByajaxlimit" resultType="com.xinxi2.bean.Byajax" resultMap="Byajaxinto"> select id,byname,byage,bygrade,bypicture,bydate FROM byajax limit #{currPageNo},#{pageSize} </select> </mapper>
3.4，service层调用
ByajaxService.java
package com.xinxi2.service; import com.xinxi2.bean.Byajax; import java.util.List; public interface ByajaxService { int getByajax(); List<Byajax> getByajaxlimit(int currPageNo, int pageSize); }
ByajaxServiceImpl.java
package com.xinxi2.service.impl; import com.xinxi2.bean.Byajax; import com.xinxi2.bean.MyAjax; import com.xinxi2.dao.ByajaxMapper; import com.xinxi2.dao.MyAjaxMapper; import com.xinxi2.service.ByajaxService; import com.xinxi2.service.MyAjaxService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; @Service("byajaxService") public class ByajaxServiceImpl implements ByajaxService { @Autowired private ByajaxMapper byajaxMapper; @Override public int getByajax() { return byajaxMapper.getByajax(); } @Override public List<Byajax> getByajaxlimit(int currPageNo, int pageSize) { int num = (currPageNo-1)*pageSize; return byajaxMapper.getByajaxlimit(num,pageSize); } }
3.5，controller层调用并在jsp页面显示
ByajaxController.java
package com.xinxi2.controller; import com.alibaba.fastjson.JSON; import com.xinxi2.bean.Byajax; import com.xinxi2.service.ByajaxService; import com.xinxi2.until.Page; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import javax.servlet.http.HttpServletRequest; import java.util.List; @Controller @RequestMapping("/byajaxController") public class ByajaxController { @Autowired private ByajaxService byajaxService; @RequestMapping("/getByajaxlimit") @ResponseBody public String getByajaxlimit(Byajax byajax, HttpServletRequest request){ Page page = new Page(); String currPageNoStr = request.getParameter("currPageNo"); if (currPageNoStr==null || "".equals(currPageNoStr)){ page.setCurrPageNo(1); }else { page.setCurrPageNo(Integer.parseInt(currPageNoStr)); } String pageSizeStr = request.getParameter("pageSize"); if (pageSizeStr==null || "".equals(pageSizeStr)){ page.setPageSize(3); }else { page.setPageSize(Integer.parseInt(pageSizeStr)); } page.setTotalCount(byajaxService.getByajax()); page.setByajaxs(byajaxService.getByajaxlimit(page.getCurrPageNo(),page.getPageSize())); String result = JSON.toJSONString(page); return result; } }
总结
最后，简单说点心得，在实现的过程中不要一味的寻求别人详细的模板或者解释，这个只是给你一个参考，最重要的是理解整个过程，然后可以通过自己的方式进行实现。
