springboot整合html之分頁功能實現-html教學-PHP中文網

首頁

web前端

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

HTML標籤和HTML屬性有什麼區別？May 14, 2025 am 12:01 AM

HTMLtagsdefinethestructureofawebpage,whileattributesaddfunctionalityanddetails.1)Tagslike,,andoutlinethecontent'splacement.2)Attributessuchassrc,class,andstyleenhancetagsbyspecifyingimagesources,styling,andmore,improvingfunctionalityandappearance.

HTML的未來：進化和趨勢May 13, 2025 am 12:01 AM

HTML的未來將朝著更加語義化、功能化和模塊化的方向發展。 1)語義化將使標籤更明確地描述內容，提升SEO和無障礙訪問。 2)功能化將引入新元素和屬性，滿足用戶需求。 3)模塊化將支持組件化開發，提高代碼復用性。

為什麼HTML屬性對Web開發很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外觀和功能

Alt屬性的目的是什麼？為什麼重要？May 11, 2025 am 12:01 AM

alt屬性是HTML中標籤的重要部分，用於提供圖片的替代文本。 1.當圖片無法加載時，alt屬性中的文本會顯示，提升用戶體驗。 2.屏幕閱讀器使用alt屬性幫助視障用戶理解圖片內容。 3.搜索引擎索引alt屬性中的文本，提高網頁的SEO排名。

HTML，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。

如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM

設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。

HTML屬性的目的是什麼？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中創建列表？May 06, 2025 am 12:01 AM

toCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。

See all articles