SSM框架前后端分页功能，HTML，JavaScript，Ajax异步请求，Page工具类功能实现分页操作

实现效果

HTML:

<div class="panel admin-panel">
        <tr>
            <td colspan="8">
                <div id="pageContext" class="pagelist">
<!--                    <a href='javascript:void(0)' href="">上一页</a>-->
<!--                    <span class="current">1</span>-->
<!--                    <a href="">2</a>-->
<!--                    <a href="">3</a>-->
<!--                    <a href="">下一页</a><a href="">尾页</a>-->
                </div>
            </td>
        </tr>
    </div>

css：

.pagelist {padding:10px 0; text-align:center;}
.pagelist span,.pagelist a{ border-radius:3px; border:1px solid #dfdfdf;display:inline-block; padding:5px 12px;}
.pagelist a{ margin:0 3px;}
.pagelist span.current{ background:#09F; color:#FFF; border-color:#09F; margin:0 2px;}
.pagelist a:hover{background:#09F; color:#FFF; border-color:#09F; }
.pagelist a.current{background:#09F; color:#FFF; border-color:#09F; }
.pagelist label{ padding-left:15px; color:#999;}
.pagelist label b{color:red; font-weight:normal; margin:0 3px;}

js:

    var pageSize = 5;
    var thisPage = 1;
    var maxPageNum = "";

    function setPage(thisPage, total) {

        //设置之前先清空
        $("#pageContext").empty();

        var content = "<a href='javascript:void(0)'>上一页</a>";

        if (total%pageSize==0){
            maxPageNum = parseInt(total/pageSize);
        } else{
            maxPageNum = parseInt(total/pageSize) + 1;
        }

        for (var i = 1; i <= maxPageNum; i++ ){
            if (thisPage == i) {
                content += "<a href='javascript:void(0)' class='current'>" + i + "</a>";
            } else{
                content += "<a href='javascript:void(0)'>" + i + "</a>";
            }

        }
        content += "<a href='javascript:void(0)'>下一页</a><a href='javascript:void(0)'>尾页</a>";

        $("#pageContext").append(content);

    }


    //发送ajax请求，获取分页数据
    function gotoPage(thisPage) {
        //请求参数
        var list = {
            "size" : pageSize,
            "page" : thisPage
        };


        $.ajax({
            url: '/education_portal_system_war/ad/findAd.action',
            type: 'post',
            dataType: 'json',
            data : JSON.stringify(list),
            contentType : 'application/json;charset=UTF-8',
            headers: {
                "Content-Type": "application/json",
                "token": getCookieInfo("userInfo").t.token
            },
            success: function (data) {
                if (data.status == 0) {
                    setData(data.t.rows);
                    setPage(data.t.page, data.t.total);
                }
            },
            error: function (e) {
                console.log("获取所有广告失败:" + e);
            }
        })
    }

    //点击页码
    $("#pageContext").on('click', "a", function () {
        thisPage = $(".current").text();
        var selectPageNum = $(this).text();
        if (selectPageNum == '上一页'){
            if (thisPage != "1"){
                thisPage = thisPage - 1;
            }
        } else if(selectPageNum == "下一页"){
            if (thisPage != maxPageNum){
                thisPage++;
            }
        } else if (selectPageNum == "尾页"){
            thisPage = maxPageNum;
        } else{
            thisPage = selectPageNum;
        }
        console.log("selectPageNum:" + thisPage);

        gotoPage(thisPage)
    });

后端Page工具类

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Page<T> {

    //总条数
    private Integer total;
    //每页显示的数量
    private Integer size;
    //当前页
    private Integer page;
    //结果集
    private List<T> rows;
}

Controller：

 /**
     * 查找Ad
     * @param adVO
     * @return
     */
    @RequestMapping(value = "/findAd", method = RequestMethod.POST)
    public ResponseResult findAd(@RequestBody AdVO adVO){
        ResponseResult<Page<Ad>> responseResult = new ResponseResult<>();
        try {
            Page<Ad> page = adService.queryAdByAdVO(adVO);
            responseResult.setStatus(0);
            responseResult.setT(page);
        } catch (Exception e) {
            responseResult.setStatus(404);
            e.printStackTrace();
        }
        return responseResult;
    }

Service:

@Override
    public Page<Ad> queryAdByAdVO(AdVO adVO) throws Exception {
        //查询参数的设置
        adVO.setStartRow(adVO.getSize() * (adVO.getPage() - 1) );
        adVO.setDel(0);     //没删除的

        //返回参数的设置
        Page<Ad> page = new Page<>();
        page.setSize(adVO.getSize());    //每页显示5条
        page.setPage(adVO.getPage());   //当前页
        page.setTotal(adMapper.countAd(adVO));  //总条数
        page.setRows(adMapper.queryAdByAdVO(adVO)); //列表信息

        return page;
    }

Mapper:

     /**
     * 分页查询广告
     * @param adVO
     * @return
     * @throws Exception
     */
    List<Ad> queryAdByAdVO(AdVO adVO) throws Exception;

    /**
     * 查询广告总条数
     * @param adVO
     * @return
     * @throws Exception
     */
    Integer countAd(AdVO adVO) throws Exception;

Mapper.xml:

    <select id="queryAdByAdVO" parameterType="com.qf.cd.vo.AdVO" resultType="com.qf.cd.pojo.Ad">
        SELECT
        *
        FROM
        t_ad
        <where>
            <if test="adId != null">
                adId = #{adId}
            </if>
            <if test="del != null">
                AND del = #{del}
            </if>
        </where>
        LIMIT #{startRow}, #{size}
    </select>

    <select id="countAd" parameterType="com.qf.cd.vo.AdVO" resultType="java.lang.Integer">
        SELECT
        count(*)
        FROM
        t_ad
        <where>
            <if test="adId != null">
                adId = #{adId}
            </if>
            <if test="del != null">
                AND del = #{del}
            </if>
        </where>
    </select>