Table of contents
1. The use of paging in SSM
Pagination in java has always been a part that I dare not touch. This blog comprehensively analyzes how the SSM framework implements paging.
2. Effect display
Clicking on the previous page, the next page, the homepage or the last page, or jumping are all static implementations.
3. Implementation of the form
3.1, front-end code
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 implementation
<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. Configure page (used to display the number of items, pages, etc.) and Byajax (entity class)
Under the until package: 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, Query data in 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 layer call
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, the controller layer calls and displays on the jsp page
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;
}
}
Summarize
Finally, let me give you some thoughts. Don’t blindly seek other people’s detailed templates or explanations during the implementation process. This is just to give you a reference. The most important thing is to understand the entire process, and then implement it in your own way.
Finally, please let me know if you have any shortcomings! ! !