欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！
CSS手册 CSS3手册 CSS论坛 CSS培训 CSS任务 网闻
DIVCSS5培训 系统快速学会CSS布局技术！
DIVCSS5首页 > HTML入门 >

springboot集成html之分页功能实现

　　说不清楚，直接上代码。和展示效果：
 
　　前台：
 
　　
 
　　
 
　　
 
　　
 
　　
 
　　
 
　　
 
　　
 
　　
 
　　
 
　　
 
　　
 
　　
 
　　
 
　　
 
　　
 
　　
 
　　
 
　　
 
　　
 
　　
 
　　<!DOCTYPEhtml>
 
　　<htmlxmlns="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>
 
　　<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
 
　　<scripttype="text/javascript"src="/js/jquery.js"></script>
 
　　<scripttype="text/javascript"src="/js/page_common.js"></script>
 
　　<linkhref="/css/common_style_blue.css"rel="stylesheet"type="text/css"/>
 
　　<linkrel="stylesheet"type="text/css"href="/css/index_1.css"/>
 
　　<scripttype="text/javascript">
 
　　varpageNo=1;
 
　　varpageSize=8;
 
　　varpages=0;
 
　　//<![CDATA[
 
　　$(document).ready(function(){
 
　　varkey=$("#keyword").val();
 
　　loadData(key,pageNo,pageSize);
 
　　});
 
　　functionloadData(key,pageNo,pageSize){
 
　　$.ajax({
 
　　url:"/web/getReport",
 
　　type:"post",
 
　　data:{keyword:key,pageNo:pageNo,pageSize:pageSize},
 
　　success:function(data){
 
　　varjson=eval('('+data+')');
 
　　console.log(data);
 
　　varhtml="";
 
　　//varreportlisthtml='';
 
　　varmaojungang=json.data;
 
　　//varmessage=json.message;
 
　　vartotalCount=json.total;
 
　　pages=Math.ceil(totalCount/pageSize);
 
　　//alert(message);
 
　　for(variinmaojungang){
 
　　html=html+"<tr>"+
 
　　"<td>"+maojungang[i].byReportUser+"&nbsp;"+maojungang[i].byReportName+"&nbsp;</td>"+
 
　　"<td>"+"<textarea>"+maojungang[i].content+"</textarea>"+"&nbsp;</td>"+
 
　　"<td>"+maojungang[i].timed+"&nbsp;</td>"+
 
　　"<td>"+maojungang[i].friendId+"&nbsp;</td>"+
 
　　"<td>"+maojungang[i].taskId+"&nbsp;</td>"+
 
　　"<td>"+maojungang[i].reportUser+"&nbsp;"+maojungang[i].reportName+"&nbsp;</td>"+"</tr>";
 
　　}
 
　　//$('#TableData').html(reportlisthtml);
 
　　$("#TableData").html(html);
 
　　varnewText="共"+totalCount+"条，"+"第"+pageNo+"页，"+"共"+pages+"页";
 
　　$("#summary").text(newText);
 
　　}
 
　　});
 
　　}
 
　　functionsearch(){
 
　　//loadData($("#keyword").val());
 
　　varkey=$.trim($("#keyword").val().trim());
 
　　loadData(key,pageNo,pageSize);
 
　　}
 
　　functionindex(){
 
　　pageNo=1;
 
　　varkey=$.trim($("#keyword").val().trim());
 
　　loadData(key,pageNo,pageSize);
 
　　}
 
　　functionlast(){
 
　　varkey=$.trim($("#keyword").val().trim());
 
　　if(pageNo==1){
 
　　returnfalse;
 
　　}else{
 
　　pageNo--;
 
　　loadData(key,pageNo,pageSize);
 
　　}
 
　　}
 
　　functionnext(){
 
　　varkey=$.trim($("#keyword").val().trim());
 
　　if(pageNo==pages){
 
　　returnfalse;
 
　　}else{
 
　　pageNo++;
 
　　loadData(key,pageNo,pageSize);
 
　　}
 
　　}
 
　　functionzuihou(){
 
　　pageNo=pages;
 
　　varkey=$.trim($("#keyword").val().trim());
 
　　loadData(key,pageNo,pageSize);
 
　　}
 
　　functionpageNumber(){
 
　　varpageNumber=$.trim($("#pageNumber").val().trim());
 
　　varkey=$.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:2pxsolid#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:2pxsolid#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:2pxsolid#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:2pxsolid#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:0auto;
 
　　}
 
　　</style>
 
　　<body>
 
　　<pstyle="width:100%;height:1080px;background-image:url('/image/girldd.jpg');position:fixed;top:0;z-index:999;">
 
　　<pstyle="width:100%;background-color:aqua;position:fixed;top:0;z-index:999;">
 
　　<pstyle="margin-left:40%;margin-right:50%;width:30%">
 
　　<h1style="font-size:30px;color:#551A8B">陪米后台主页</h1>
 
　　</p>
 
　　</p>
 
　　<pstyle="margin-top:90px;float:left;margin-left:0%;">
 
　　<ahref="/web/reportlist"><pclass="tnd">
 
　　<pstyle="margin-top:15px;font-size:18px">
 
　　举报信息查询
 
　　</p>
 
　　</p></a>
 
　　<ahref="/web/getReport"><pclass="tnd">
 
　　<pstyle="margin-top:15px;font-size:18px">
 
　　用户信息查询
 
　　</p>
 
　　</p></a>
 
　　<ahref="/web/getReport"><pclass="tnd">
 
　　<pstyle="margin-top:15px;font-size:18px">
 
　　不良信息删除
 
　　</p>
 
　　</p></a>
 
　　<ahref="/web/getReport"><pclass="tnd">
 
　　<pstyle="margin-top:15px;font-size:18px">
 
　　用户账户封禁
 
　　</p>
 
　　</p></a>
 
　　<ahref="/web/getReport"><pclass="tnd">
 
　　<pstyle="margin-top:15px;font-size:18px">
 
　　用户意见反馈
 
　　</p>
 
　　</p></a>
 
　　</p>
 
　　<pclass="content">
 
　　<pclass="tnds">
 
　　<pstyle="text-align:left;float:left;">举报信息</p>
 
　　<pstyle="text-align:center;font-size:15px;float:left;margin-left:19.95%;margin-top:10px">
 
　　<formaction="">
 
　　请输入举报时间：<inputid="keyword"name="timed"class=""placeholder="yyyy-MM-dd"/>
 
　　<inputtype="button"value="搜索"onclick="search()"/>
 
　　</form>
 
　　</p>
 
　　</p>
 
　　<!--主内容区域（数据列表或表单显示）-->
 
　　<pclass="tndss">
 
　　<tableclass="tab">
 
　　<!--表头-->
 
　　<thead>
 
　　<tralign="center">
 
　　<tdstyle="width:10%">被举报人ID</td>
 
　　<tdstyle="width:50%">举报内容</td>
 
　　<tdstyle="width:10%">举报时间</td>
 
　　<tdstyle="width:10%">朋友圈ID</td>
 
　　<tdstyle="width:10%">任务ID</td>
 
　　<tdstyle="width:10%">举报人ID</td>
 
　　</tr>
 
　　</thead>
 
　　<!--显示数据列表-->
 
　　<tbodyid="TableData"style="color:red;">
 
　　</tbody>
 
　　</table>
 
　　<!--其他功能超链接-->
 
　　<pid="footer">
 
　　<spanid="summary"></span>
 
　　<ulid="pagination">
 
　　<liid="01"><aonclick="index()"style="font-size:25px">首页</a></li>
 
　　<liid="02"><aonclick="last()"style="font-size:25px">上一页</a></li>
 
　　<liid="03"><aonclick="next()"style="font-size:25px">下一页</a></li>
 
　　<liid="04"><aonclick="zuihou()"style="font-size:25px">最后一页</a></li>
 
　　</ul>
 
　　<pid="select">
 
　　<span>跳转到</span>
 
　　<inputtype="text"name="page_num"id="pageNumber"/>
 
　　<span>页</span>
 
　　<inputtype="button"name="go_btn"value="跳转"onclick="pageNumber()"/>
 
　　</p>
 
　　</p>
 
　　</p>
 
　　</p>
 
　　</p>
 
　　</body>
 
　　</html>
 
　　后台：
 
　　packagecom.hpm.blog.controller;
 
　　importjava.util.ArrayList;
 
　　importjava.util.List;
 
　　importjavax.servlet.http.HttpSession;
 
　　importorg.slf4j.Logger;
 
　　importorg.slf4j.LoggerFactory;
 
　　importorg.springframework.beans.factory.annotation.Autowired;
 
　　importorg.springframework.stereotype.Controller;
 
　　importorg.springframework.ui.Model;
 
　　importorg.springframework.web.bind.annotation.ModelAttribute;
 
　　importorg.springframework.web.bind.annotation.RequestMapping;
 
　　importorg.springframework.web.bind.annotation.ResponseBody;
 
　　importcom.fasterxml.jackson.annotation.JsonFormat.Value;
 
　　importcom.hpm.blog.model.AdminUser;
 
　　importcom.hpm.blog.model.ReportVo;
 
　　importcom.hpm.blog.model.ReturnResult;
 
　　importcom.hpm.blog.service.AttentionService;
 
　　importcom.hpm.blog.service.ReportService;
 
　　importcom.hpm.blog.util.Constant;
 
　　importcom.hpm.blog.util.Constants;
 
　　importcom.hpm.blog.util.Page;
 
　　importcom.hpm.blog.util.ResultData;
 
　　@Controller
 
　　@RequestMapping("/web/")
 
　　publicclassReportController{
 
　　privatestaticfinalLoggerlogger=LoggerFactory.getLogger(AttentionService.class);
 
　　@Autowired
 
　　privateReportServicereportService;
 
　　@RequestMapping("getReport")
 
　　@ResponseBody
 
　　publicReturnResultgetReport(HttpSessionsession,Modelmodel,Stringkeyword,StringpageNo,StringpageSize){
 
　　ReturnResultresult=newReturnResult();
 
　　try{
 
　　Pagepage=newPage();
 
　　page.setPageNo(Integer.valueOf(pageNo));
 
　　page.setPageSize(Integer.valueOf(pageSize));
 
　　AdminUseradminUser=(AdminUser)session.getAttribute(Constants.USER_SESSION);
 
　　List<ReportVo>list=newArrayList<ReportVo>();
 
　　if(null!=adminUser){
 
　　if(null==keyword||"".equals(keyword)){
 
　　list=reportService.queryAll(page);
 
　　inttotal=reportService.queryAllCount(page);
 
　　result.setTotal(total);
 
　　result.setData(list);
 
　　result.setCode(Constant.SUCCESS_CODE);
 
　　result.setMessage("查询成功！");
 
　　}else{
 
　　list=reportService.queryByKeyword(keyword,page);
 
　　inttotal=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(Exceptione){
 
　　//TODO:handleexception
 
　　logger.debug("error="+e.getClass().getSimpleName()+""+e.getMessage());
 
　　result.setCode(Constant.ERROR_CODE);
 
　　result.setMessage("信息获取失败！请稍后重试.....");
 
　　}
 
　　returnresult;
 
　　}
 
　　}
 
　　



本文转载自中文网


 

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h55105.shtml

必备CSS教程Essential CSS Tutorials
必备HTML基础教程Essential HTML Tutorials
最新文章 NEWS
CSS 特效 CSS EFFECTS
相关文章 RELATED
热点文章 HOT