在java中分页一直是我不敢触及的一部分。本次博客全面剖析一下SSM框架如何实现分页。
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>
<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="" + item.id + " " +
" " + item.byname + " " +
" " + item.byage + " " +
" " + item.bygrade + " " +
" " + item.bypicture + " " +
" " + item.bydate + " " +
" " +
" "
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>
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;
}
}
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
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>
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);
}
}
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;
}
}
最后,简单说点心得,在实现的过程中不要一味的寻求别人详细的模板或者解释,这个只是给你一个参考,最重要的是理解整个过程,然后可以通过自己的方式进行实现。
最后,有什么不足的地方多多指教!!!