springboot集成html之分页功能实现

来源：懂视网责编：小采时间：2020-11-27 15:25:32

springboot集成html之分页功能实现

springboot集成html之分页功能实现:这篇文章主要介绍了关于springboot集成html之分页功能实现，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下说不清楚，直接上代码。和展示效果：前台：<!DOCTYPE html> <html xmlns="http://www.w3.o

推荐度：

点击下载本文 文档为doc格式

导读springboot集成html之分页功能实现:这篇文章主要介绍了关于springboot集成html之分页功能实现，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下说不清楚，直接上代码。和展示效果：前台：<!DOCTYPE html> <html xmlns="http://www.w3.o

这篇文章主要介绍了关于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);
	@Autowired
	private ReportService reportService;
	
	@RequestMapping("getReport")
	@ResponseBody
	public 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 exception
	logger.debug("error = " + e.getClass().getSimpleName()+" "+e.getMessage());
	result.setCode(Constant.ERROR_CODE);
	result.setMessage("信息获取失败！请稍后重试.....");
	}
	return result;
	}


}

效果：