目录
一，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;
}
}
总结
最后，简单说点心得，在实现的过程中不要一味的寻求别人详细的模板或者解释，这个只是给你一个参考，最重要的是理解整个过程，然后可以通过自己的方式进行实现。
最后，有什么不足的地方多多指教！！！