教你实现SSM和Ajax后端分页-Toy模板网

这篇具有很好参考价值的文章主要介绍了教你实现SSM和Ajax后端分页。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一，SSM中分页的使用

在java中分页一直是我不敢触及的一部分。本次博客全面剖析一下SSM框架如何实现分页。

二，效果展示

教你实现SSM和Ajax后端分页,ajax,前端,javascript,mvc,java
点击前一页后一页首页或者尾页或者是跳转都是静态的实现。

三，表单的实现

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;
    }
}