搜尋
首頁web前端html教學springboot整合html之分頁功能實現
springboot整合html之分頁功能實現
不言
不言
May 03, 2018 pm 03:21 PM
htmlspringboot功能

這篇文章主要介紹了關於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(&#39;(&#39;+data + &#39;)&#39;);
						console.log(data);
						var html="";																						
//					    var reportlisthtml=&#39;&#39;;						   
						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>";


							} 				
//					   $(&#39;#TableData&#39;).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(&#39;/image/girldd.jpg&#39;) ;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 id="陪米后台主页">陪米后台主页</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;
	}


}

效果：


#點選檢舉查詢：



##點選下一頁：

#輸入頁碼跳轉：

輸入時間搜尋：

############帶著時間參數分頁：################

以上是springboot整合html之分頁功能實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
相關文章
怎么使用SpringBoot+Canal实现数据库实时监控怎么使用SpringBoot+Canal实现数据库实时监控May 10, 2023 pm 06:25 PM

Canal工作原理Canal模拟MySQLslave的交互协议，伪装自己为MySQLslave，向MySQLmaster发送dump协议MySQLmaster收到dump请求，开始推送binarylog给slave（也就是Canal）Canal解析binarylog对象（原始为byte流）MySQL打开binlog模式在MySQL配置文件my.cnf设置如下信息：[mysqld]#打开binloglog-bin=mysql-bin#选择ROW(行)模式binlog-format=ROW#配置My

Spring Boot怎么使用SSE方式向前端推送数据Spring Boot怎么使用SSE方式向前端推送数据May 10, 2023 pm 05:31 PM

前言SSE简单的来说就是服务器主动向前端推送数据的一种技术，它是单向的，也就是说前端是不能向服务器发送数据的。SSE适用于消息推送，监控等只需要服务器推送数据的场景中，下面是使用SpringBoot来实现一个简单的模拟向前端推动进度数据，前端页面接受后展示进度条。服务端在SpringBoot中使用时需要注意，最好使用SpringWeb提供的SseEmitter这个类来进行操作，我在刚开始时使用网上说的将Content-Type设置为text-stream这种方式发现每次前端每次都会重新创建接。最

SpringBoot怎么实现二维码扫码登录SpringBoot怎么实现二维码扫码登录May 10, 2023 pm 08:25 PM

一、手机扫二维码登录的原理二维码扫码登录是一种基于OAuth3.0协议的授权登录方式。在这种方式下，应用程序不需要获取用户的用户名和密码，只需要获取用户的授权即可。二维码扫码登录主要有以下几个步骤：应用程序生成一个二维码，并将该二维码展示给用户。用户使用扫码工具扫描该二维码，并在授权页面中授权。用户授权后，应用程序会获取一个授权码。应用程序使用该授权码向授权服务器请求访问令牌。授权服务器返回一个访问令牌给应用程序。应用程序使用该访问令牌访问资源服务器。通过以上步骤，二维码扫码登录可以实现用户的快

SpringBoot/Spring AOP默认动态代理方式是什么SpringBoot/Spring AOP默认动态代理方式是什么May 10, 2023 pm 03:52 PM

1.springboot2.x及以上版本在SpringBoot2.xAOP中会默认使用Cglib来实现，但是Spring5中默认还是使用jdk动态代理。SpringAOP默认使用JDK动态代理，如果对象没有实现接口，则使用CGLIB代理。当然，也可以强制使用CGLIB代理。在SpringBoot中，通过AopAutoConfiguration来自动装配AOP.2.Springboot1.xSpringboot1.xAOP默认还是使用JDK动态代理的3.SpringBoot2.x为何默认使用Cgl

spring boot怎么对敏感信息进行加解密spring boot怎么对敏感信息进行加解密May 10, 2023 pm 02:46 PM

我们使用jasypt最新版本对敏感信息进行加解密。1.在项目pom文件中加入如下依赖：com.github.ulisesbocchiojasypt-spring-boot-starter3.0.32.创建加解密公用类：packagecom.myproject.common.utils;importorg.jasypt.encryption.pbe.PooledPBEStringEncryptor;importorg.jasypt.encryption.pbe.config.SimpleStrin

使用Java SpringBoot集成POI实现Word文档导出使用Java SpringBoot集成POI实现Word文档导出Apr 21, 2023 pm 12:19 PM

知识准备需要理解ApachePOI遵循的标准（OfficeOpenXML（OOXML）标准和微软的OLE2复合文档格式（OLE2）），这将对应着API的依赖包。什么是POIApachePOI是用Java编写的免费开源的跨平台的JavaAPI，ApachePOI提供API给Java程序对MicrosoftOffice格式档案读和写的功能。POI为“PoorObfuscationImplementation”的首字母缩写，意为“简洁版的模糊实现”。ApachePOI是创建和维护操作各种符合Offic

springboot怎么整合shiro实现多验证登录功能springboot怎么整合shiro实现多验证登录功能May 10, 2023 pm 04:19 PM

1.首先新建一个shiroConfigshiro的配置类，代码如下：@ConfigurationpublicclassSpringShiroConfig{/***@paramrealms这儿使用接口集合是为了实现多验证登录时使用的*@return*/@BeanpublicSecurityManagersecurityManager(Collectionrealms){DefaultWebSecurityManagersManager=newDefaultWebSecurityManager();

springboot怎么配置mybatis和事务管理springboot怎么配置mybatis和事务管理May 10, 2023 pm 07:13 PM

一、springboot与mybatis的配置1.首先,springboot配置mybatis需要的全部依赖如下：org.springframework.bootspring-boot-starter-parent1.5.1.RELEASEorg.springframework.bootspring-boot-starter-web1.5.1.RELEASEorg.mybatis.spring.bootmybatis-spring-boot-starter1.2.0com.oracleojdbc

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
1 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
在哪裡可以找到原子中的起重機控制鑰匙卡
1 週前ByDDD
顯示更多

熱工具

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序，非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具，幫助Web開發人員更好地理解保護網路應用程式的過程，並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞，難度各不相同。請注意，該軟體中

mPDF

mPDF

mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7416
15
CakePHP 教程
1359
52
steam的賬戶名稱是什麼格式
76
11
win11激活密鑰永久
26
19
顯示更多