这篇文章主要介绍了关于springboot集成html之分页功能实现 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
说不清楚，直接上代码。和展示效果：
前台：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"><head> <title>陪米app后台主页</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="/js/jquery.js"></script><script type="text/javascript" src="/js/page_common.js"></script><link href="/css/common_style_blue.css" rel="stylesheet" type="text/css"/><link rel="stylesheet" type="text/css" href="/css/index_1.css" /><script type="text/javascript">var pageNo = 1;var pageSize = 8;var pages = 0;//<![CDATA[ $(document).ready(function(){ var key = $("#keyword").val(); loadData(key,pageNo,pageSize); }); function loadData(key,pageNo,pageSize){ $.ajax({url:"/web/getReport",type:"post",data:{keyword:key,pageNo:pageNo,pageSize:pageSize},success:function(data){var json = eval('('+data + ')');console.log(data);var html="";// var reportlisthtml=''; var maojungang = json.data;//var message = json.message;var totalCount = json.total; pages = Math.ceil(totalCount/pageSize);//alert(message);for(var i in maojungang){ html=html+"<tr>"+"<td>"+maojungang[i].byReportUser+" "+maojungang[i].byReportName+" </td>"+"<td>"+"<textarea>"+maojungang[i].content+"</textarea>"+" </td>"+"<td>"+maojungang[i].timed+" </td>"+"<td>"+maojungang[i].friendId+" </td>"+"<td>"+maojungang[i].taskId+" </td>"+ "<td>"+maojungang[i].reportUser+" "+maojungang[i].reportName+" </td>"+"</tr>";} // $('#TableData').html(reportlisthtml); $("#TableData").html(html); var newText = "共" + totalCount + "条，" + "第" + pageNo + "页，" + "共" + pages + "页"; $("#summary").text(newText);}}); } function search(){// loadData($("#keyword").val()); var key = $.trim($("#keyword").val().trim());loadData(key,pageNo,pageSize); } function index(){ pageNo = 1; var key = $.trim($("#keyword").val().trim()); loadData(key,pageNo, pageSize); } function last(){var key = $.trim($("#keyword").val().trim()); if(pageNo == 1){ return false; } else{ pageNo--; loadData(key,pageNo, pageSize); } } function next(){ var key = $.trim($("#keyword").val().trim()); if(pageNo == pages){ return false; } else{ pageNo++; loadData(key,pageNo, pageSize); } } function zuihou(){ pageNo = pages; var key = $.trim($("#keyword").val().trim()); loadData(key,pageNo, pageSize); } function pageNumber(){ var pageNumber = $.trim($("#pageNumber").val().trim()); var key = $.trim($("#keyword").val().trim()); pageNo = pageNumber; loadData(key,pageNo, pageSize); } //]]></script></head><style>textarea{height:50px;width: 80%;}.tnd{text-align:center;width:100%;height:50px;border: solid;padding:10px;border: 2px solid #000000;-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px; background-color:aqua; } .tnds{font-size:25px;width:98.7%;height:30px;border: solid;padding:10px;border: 2px solid #000000;-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px; background-color:aqua; color: #551A8B; } .tndss{font-size:25px;text-align:center;width:98.7%;height:800px;border: solid;padding:10px;border: 2px solid #000000;-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px; background-color:aqua; color: #551A8B; }.content{float: left;margin-left: 1.8%;width:91%;height: 900px;margin-top: 88px;text-align:center;border: solid;border: 2px solid #000000;-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius:15px;}.tab{align="center"; cellspacing="0"; cellpadding="0";height: 300px; table-layout:fixed; empty-cells:show; border-collapse: collapse; margin:0 auto;}</style><body><p style="width: 100%;height: 1080px;background-image:url('/image/girldd.jpg') ;position:fixed;top:0;z-index:999;"><p style="width: 100%;background-color: aqua;position:fixed;top:0;z-index:999;"><p style="margin-left: 40%;margin-right: 50%;width: 30%"><h1 style="font-size: 30px;color: #551A8B" >陪米后台主页</h1></p></p><p style="margin-top: 90px;float: left;margin-left: 0%;"> <a href="/web/reportlist" ><p class="tnd"><p style="margin-top: 15px;font-size: 18px"> 举报信息查询</p></p></a><a href="/web/getReport" ><p class="tnd"><p style="margin-top: 15px;font-size: 18px"> 用户信息查询</p></p></a><a href="/web/getReport" ><p class="tnd"><p style="margin-top: 15px;font-size: 18px"> 不良信息删除</p></p></a><a href="/web/getReport" ><p class="tnd"><p style="margin-top: 15px;font-size: 18px"> 用户账户封禁</p></p></a><a href="/web/getReport" ><p class="tnd"><p style="margin-top: 15px;font-size: 18px"> 用户意见反馈</p></p></a> </p> <p class="content" > <p class="tnds"><p style="text-align: left;float: left;">举报信息</p><p style="text-align: center;font-size: 15px;float: left;margin-left: 19.95%;margin-top: 10px"><form action="">请输入举报时间：<input id="keyword" name="timed" class="" placeholder="yyyy-MM-dd"/><input type="button" value="搜索" onclick="search()"/></form></p></p><!-- 主内容区域（数据列表或表单显示） --><p class="tndss"> <table class="tab" > <!-- 表头--> <thead> <tr align="center" ><td style="width: 10%">被举报人ID</td><td style="width: 50%">举报内容</td><td style="width: 10%">举报时间</td><td style="width: 10%">朋友圈ID</td><td style="width: 10%">任务ID</td> <td style="width: 10%">举报人ID</td></tr></thead><!--显示数据列表 --> <tbody id="TableData" style="color: red; "> </tbody> </table> <!-- 其他功能超链接 --> <p id="footer"> <span id="summary"></span> <ul id="pagination"> <li id="01"><a onclick="index()" style="font-size: 25px">首页</a></li> <li id="02"><a onclick="last()" style="font-size: 25px" >上一页</a></li> <li id="03"><a onclick="next()" style="font-size: 25px">下一页</a></li> <li id="04"><a onclick="zuihou()" style="font-size: 25px">最后一页</a></li> </ul> <p id="select"> <span>跳转到 </span> <input type="text" name="page_num" id="pageNumber"/> <span> 页 </span> <input type="button" name="go_btn" value="跳转" onclick="pageNumber()"/> </p> </p></p> </p> </p></body></html>后台：package com.hpm.blog.controller;import java.util.ArrayList;import java.util.List;import javax.servlet.http.HttpSession;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.ModelAttribute;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;import com.fasterxml.jackson.annotation.JsonFormat.Value;import com.hpm.blog.model.AdminUser;import com.hpm.blog.model.ReportVo;import com.hpm.blog.model.ReturnResult;import com.hpm.blog.service.AttentionService;import com.hpm.blog.service.ReportService;import com.hpm.blog.util.Constant;import com.hpm.blog.util.Constants;import com.hpm.blog.util.Page;import com.hpm.blog.util.ResultData;@Controller@RequestMapping("/web/")public class ReportController {private static final Logger logger = LoggerFactory.getLogger(AttentionService.class);@Autowiredprivate ReportService reportService;@RequestMapping("getReport")@ResponseBodypublic ReturnResult getReport(HttpSession session,Model model,String keyword,String pageNo,String pageSize){ReturnResult result = new ReturnResult();try {Page page = new Page();page.setPageNo(Integer.valueOf(pageNo));page.setPageSize(Integer.valueOf(pageSize));AdminUser adminUser = (AdminUser) session.getAttribute(Constants.USER_SESSION);List<ReportVo> list = new ArrayList<ReportVo>();if(null != adminUser){if(null == keyword || "".equals(keyword)){list= reportService.queryAll(page);int total = reportService.queryAllCount(page);result.setTotal(total);result.setData(list);result.setCode(Constant.SUCCESS_CODE);result.setMessage("查询成功！");}else{list= reportService.queryByKeyword(keyword,page);int total = reportService.queryAllCountBykey(page,keyword);result.setTotal(total);result.setData(list);result.setCode(Constant.SUCCESS_CODE);result.setMessage("查询成功！");} }else{result.setCode(Constant.ERROR_CODE);result.setMessage("身份失效，请重新登录");}} catch (Exception e) {// TODO: handle exceptionlogger.debug("error = " + e.getClass().getSimpleName()+" "+e.getMessage());result.setCode(Constant.ERROR_CODE);result.setMessage("信息获取失败！请稍后重试.....");}return result;}}效果：
点击举报查询：
点击下一页：
输入页码跳转：
输入时间搜索：
带着时间参数分页：
