Web开发——获取查询内容（内容分页显示）【前台页面部分】

最新推荐文章于 2022-07-02 16:17:50 发布
最新推荐文章于 2022-07-02 16:17:50 发布
阅读量2.2k 收藏 3
点赞数
分类专栏： Web前台demo小记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MOONCOM/article/details/73850668
版权

代码实现功能描述：根据用户在页面上输入的开始时间和结束时间，从数据库中获取数据，获取的数据以每页10条的格式分页显示在页面上。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
	<style>
		.rptIntfPortlet {
		    width: 1100px;
		    margin: 0px auto;
		}
		.rptIntfPortlet .portletBody .showSection{
			font-size: 12px;
		}
		.rptIntfPortlet .searchSection label input {
		    margin-left: 10px;
		}
		.rptIntfPortlet .searchSection label {
		    display: inline-block;
		}
		.rptIntfPortlet .searchSection label:nth-child(2) {
		    margin-left: 30px;
		    margin-right: 180px;
		}
		.rptIntfPortlet .searchSection label:nth-child(4) {
		    margin-left: 190px;
		}
		.rptIntfPortlet .searchSection label:nth-child(4) input {
		    height: 30px;
		    width: 100px;
		    margin-top: -8px;
		    /* border-radius: 0px; */
		}
		.rptIntfPortlet .portletBody .showSection .showMessage{
			min-height: 450px;
			/* border:1px solid black; */
		}
		.rptIntfPortlet .portletBody .showSection .showMessage table{
			border-collapse: collapse;
    		color: #333;
    		font-size: 14px;
		}
		.rptIntfPortlet .portletBody .showSection .showMessage table tr:first-child{
			background-color: #e5e5e5;
		}
		.rptIntfPortlet .showSection .showMessage table tr{
			background-color: white;
			height: 40px;
		}
		.rptIntfPortlet  .showSection .showMessage table tr:nth-child(2n+1){
			background-color:#fafafa;
		}
		/* .rptIntfPortlet  .showSection .showMessage table tr:hover{
			background-color:#e6e6e6;
			border: 1px solid white;
		} */
		.rptIntfPortlet .portletBody .showSection .showMessage table th{
			border-right: 1px solid white;
		    border-top: 1px solid #e5e5e5;
		    border-bottom: 1px solid #e5e5e5;
		    border-left: 1px solid #e5e5e5;
		}
		.rptIntfPortlet .portletBody .showSection .showMessage table th:last-child{
			border-right: 1px solid #e5e5e5;
		}
		.rptIntfPortlet .portletBody .showSection .showMessage table td{
			border: 1px solid #e5e5e5;
			text-align: center;
		}
		.rptIntfPortlet .portletBody .showSection .showBody .showMore span.input span{
			display: inline-block;
			border:1px solid #999;
			padding: 0px 8px;
			margin: 0px 2px;
			color: #3B5998;
			background-color:white;
			text-decoration: none;
			height: 22px;
			line-height: 22px;
			border-radius: 3px;
			cursor: pointer;
		}
		.rptIntfPortlet .portletBody .showSection .showMore {
		    text-align: center;
		    margin-top: 10px;
		}
		.hidden{
			display: none !important;
		}
		.inputSelect{
			background-color: #3B5998 !important;
    		color: white !important;
		}
		.rptIntfPortlet .searchSection .searchBody .errorMessage{
			color:red;
			font-weight:bold;
			position:absolute;
			height: 37px;
    		line-height: 30px;
		}
		
	</style>
	<div class="rptIntfPortlet">
		<div class="portletBody">
			<div class="searchSection">
				<div class="searchBody">
					<label class="beginTime">开始时间<input type="date" placeholder="请输入开始时间"></label>
					<label class="endTime">结束时间<input type="date" placeholder="请输入结束时间"></label>
					<label class="errorMessage hidden">开始时间必须小于结束时间</label>
					<label class="submitTime"><input type="button" value="查询" οnclick="getTotalNumber('${totalNumber}')"></label>
				</div>
			</div>
			<div class="showSection">
				<div class="showBody">
					<div class="showMessage">
						<table width="1100px">
							<tr class="title">
								<th style="min-width: 44px;">接口ID</th>
								<th style="min-width: 44px;">系统ID</th>
								<th style="min-width: 86px;">访问标志码ID</th>
								<th style="min-width: 98px;">访问用户一号通</th>
								<th style="min-width: 98px;">访问用户身份证</th>
								<th style="min-width: 56px;">访问时间</th>
								<th style="min-width: 85px;">访问接口名称</th>
								<th style="min-width: 56px;">访问状态</th>
							</tr>
							
						</table>
					</div>
					<div class="showMore">
						<span class="totalNumber">0条</span>
						<span class="totalPage">共1页</span>
						<span class="before input hidden">
							<span mark="1" οnclick="servlet(this)">首页</span>
							<span mark="1" οnclick="servlet(this)">上一页</span>
						</span>
						<span class="content input">
							<span mark="1" οnclick="servlet(this)" class="inputSelect">1</span>
						</span>
						<span class="after input">
							<span mark="1" οnclick="servlet(this)">下一页</span>
							<span mark="1" οnclick="servlet(this)">尾页</span>
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
	var pageNumber=10;          //一页显示多少条数据
	var arrayLength=5;          //多少页码形成一组
	var totalPage=1;   			//总共的页码数
	var indexPage=1;   			//当前的页码数
	var totalArrayPage=1;    	//共多少组页码
	var showNumber=0;           //展示的内容数量
	var beginTime="";           //开始时间
	var endTime="";             //结束时间
	
	//清空页面显示内容
	function clearMessage(){
		//console.log("清理数据");
		$(".rptIntfPortlet .portletBody .showSection .showMessage table tr.list").remove();
	}
	
	//点击页码触发的动作
	function servlet(item){
		clearMessage();
		indexPage=parseInt($(item).attr("mark"));
		//console.log(indexPage);
		setInput();
		selectAll('${search}');
	}
	//获取符合条件的记录数量
	function getTotalNumber(urlPath){
		beginTime=$(".rptIntfPortlet .searchBody .beginTime input").val();
		endTime=$(".rptIntfPortlet .searchBody .endTime input").val();
		$(".rptIntfPortlet .searchSection .searchBody .errorMessage").addClass("hidden");
		if(beginTime>endTime){
			//console.log("进入错误日期判断");
			$(".rptIntfPortlet .searchSection .searchBody .errorMessage").removeClass("hidden");
		}
		//console.log("开始时间为："+beginTime);
		//console.log("结束时间为："+endTime);
		$.ajax({
			url:urlPath,
			data:{beginTime:beginTime,endTime:endTime},
			dataType:'json',
			type:'post',
			success:function(data){
				var totalNumber=parseInt(data.totalNumber);
				//console.log("获取数据的长度为："+totalNumber);
				totalPage=Math.ceil(totalNumber/pageNumber);
				totalArrayPage=Math.ceil(totalPage/arrayLength);
				//在页面上设置总页数和结果总数量
				$(".rptIntfPortlet .showSection .showMore .totalNumber").text(totalNumber+"条");
				$(".rptIntfPortlet .showSection .showMore .totalPage").text("共"+totalPage+"页");
				//设置尾页的值
				$(".rptIntfPortlet .showSection .showMore span.after span:last-child").attr("mark",totalPage);
				//console.log("页码数为："+totalPage);
				indexPage=1;   //还原
				selectAll('${search}');
			},
			error:function(){
				console.log("没有获取总记录数");
			}
		});
		
	}
	//查询时触发事件
	function selectAll(urlPath){
		clearMessage();
		
		//输入值是否为完整的年月日时间
		//判断结束时间是否大于开始时间
		$.ajax({
			url:urlPath,
			data:{beginTime:beginTime,endTime:endTime,
				indexPage:indexPage,pageNumber:pageNumber},
			dataType:'json',
			type:'post',
			success:function(data){
				//通过ajax获取数据，
				console.log(data);
				//页码更新
				setInput();
				//显示查询到的内容
				var showCode="";
				for(var single in data){
					showCode+="<tr class='list'>";
					for(var singleValue in data[single]){
						showCode+="<td>"+data[single][singleValue]+"</td>";
					}
					showCode+="</tr>";
				}
				$(".rptIntfPortlet .portletBody .showSection .showMessage table").append(showCode);
			},
			error:function(){
				document.write("查询失败了");
			}
		});
		
	}
	//分组页码显示
	function setInput(){
		//防止当前页码大于最大页码
		if(indexPage>totalPage){
			indexPage=totalPage;
		}
		//防止当前页码小于1
		if(indexPage<1){
			indexPage=1;
		}
		var htmlCode="";
		var indexArrayPage=Math.ceil(indexPage/arrayLength);    	//当前下标是第几组页码
		var beforeArrayPage=0;      //倒数第二组的第一个下标
		var afterArrayPage=0;
		//控制首页、上一页;下一页、尾页的显示和隐藏
		$(".rptIntfPortlet .showSection .showMore span.input").removeClass("hidden");
		if(indexPage==1){
			$(".rptIntfPortlet .showSection .showMore span.before").addClass("hidden");
		}else if(indexPage==totalPage){
			$(".rptIntfPortlet .showSection .showMore span.after").addClass("hidden");
		}else{

		}

		//控制上一页、下一页中的值
		$(".rptIntfPortlet .showSection .showMore span.before span:last-child").attr("mark",(indexPage-1));
		$(".rptIntfPortlet .showSection .showMore span.after span:first-child").attr("mark",(indexPage+1));

		//控制页码的展示
		if(totalPage<=arrayLength){
			for(var i=1;i<=totalPage;i++){
				if(i==indexPage){
					htmlCode+='<span class="inputSelect"  οnclick="servlet(this)" mark="'+i+'">'+i+'</span>';
				}else{
					htmlCode+='<span  οnclick="servlet(this)" mark="'+i+'">'+i+'</span>';
				}
			}
			$(".rptIntfPortlet .showSection .showMore span.content").html(htmlCode);
		}else{
			if(indexArrayPage==1){
				for(var i=1;i<=arrayLength;i++){
					if(i==indexPage){
						htmlCode+='<span class="inputSelect"  οnclick="servlet(this)" mark="'+i+'">'+i+'</span>';
					}else{
						htmlCode+='<span  οnclick="servlet(this)" mark="'+i+'">'+i+'</span>';
					}
				}
				htmlCode+='<span  οnclick="servlet(this)" mark="'+(arrayLength+1)+'">...</span>';
				$(".rptIntfPortlet .showSection .showMore span.content").html(htmlCode);
			}else if(indexArrayPage==totalArrayPage){
				beforeArrayPage=(totalArrayPage-1)*arrayLength;
				htmlCode+='<span οnclick="servlet(this)" mark="'+beforeArrayPage+'">...</span>';
				for(var i=(beforeArrayPage+1);i<=totalPage;i++){
					if(i==indexPage){
						htmlCode+='<span class="inputSelect"  οnclick="servlet(this)" mark="'+i+'">'+i+'</span>';
					}else{
						htmlCode+='<span  οnclick="servlet(this)" mark="'+i+'">'+i+'</span>';
					}
				}
				$(".rptIntfPortlet .showSection .showMore span.content").html(htmlCode);
			}else{
				beforeArrayPage=(indexArrayPage-1)*arrayLength;
				afterArrayPage=indexArrayPage*arrayLength+1;
				htmlCode+='<span οnclick="servlet(this)" mark="'+beforeArrayPage+'">...</span>';
				for(var i=(beforeArrayPage+1);i<afterArrayPage;i++){
					if(i==indexPage){
						htmlCode+='<span class="inputSelect"  οnclick="servlet(this)" mark="'+i+'">'+i+'</span>';
					}else{
						htmlCode+='<span  οnclick="servlet(this)" mark="'+i+'">'+i+'</span>';
					}
				}
				htmlCode+='<span οnclick="servlet(this)" mark="'+afterArrayPage+'">...</span>';
				$(".rptIntfPortlet .showSection .showMore span.content").html(htmlCode);
			}
		}
	}
	</script>
</body>
</html>

备注：

${totalNumber}                              //路径，对应根据条件查询数据总数的后台方法

${search}                                        //路径，对应根据条件查询详细数据的后台方法

效果图如下所示：


霜月枫桥
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JAVA程序开发大全---上半部分
12-15
20.6.3 分页显示系统中销售的所有宠物信息的页面newPet.jsp 366 20.6.4 显示销售的每个宠物详细信息的页面petInfo.jsp 368 20.7 显示宠物商品模块的实现 370 20.7.1 显示商品页面 370 20.7.2 定义对宠物商品信息进行...
如何用Python获取网页指定内容
m0_67390969的博客
07-30 1万+
但是上面抓取到的代码充满尖括号的一片字符，对我们没有什么作用，这样的充满尖括号的数据就是我们从服务器收到的网页文件，就像Office的doc、pptx文件格式一样，网页文件一般是html格式。每个标记的文字内容都是夹在两个尖括号中间的，结尾尖括号用/开头，尖括号内（img和div）表示标记元素的类型（图片或文字），尖括号内可以有其他的属性（比如src）Python用做数据处理还是相当不错的，如果你想要做爬虫，Python是很好的选择，它有很多已经写好的类包，只要调用，即可完成很多复杂的功能。...
ajax+page实现获取数据前台分页展示，功能持续完善中
秃头小吴
09-24 576
因为自己天马行空，是想把获取到的数组分页展示，就摸索出了这个案例 完整demo（） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
java web表格查询按钮_【JavaWeb】62：单表查询，以及数据库总结
weixin_30055951的博客
02-24 547
今天是刘小爱自学Java的第62天。感谢你的观看，谢谢你。话不多说，继续数据库的学习：使用了数据库可视化工具Navicat，感觉真香。比在DOS窗口中操作方便多了，那个黑乎乎的窗口真心不习惯，并且也没有提示。今天详细地学习下数据记录的查询，同时最后对这几天的知识点做一个总结。一、基本查询select，选择选取的意思，在数据库之中可以理解成查询。①查询所有数据select * from stude...
Web -查询表中所有的用户信息并展示在页面上。
热门推荐
XiaoJian的博客
10-17 2万+
例: 在浏览器中输入地址之后 , 查询出所有的用户信息 ! 1.准备工作. 1.web - &gt; WEB-INF - &gt; lib包下导入jia包. 2.创建数据库和表 , 初始化表中数据 . 3.将c3p0工具类 , 放在src下 , 修改表名. 4.编写用于展示的jsp页面 . 5.创建好三层架构 . Web层 -&gt; UserServlet.java @WebServl...
FoosunCMS网站内容管理系统 V4.0 SP5 build 0802
03-26
11.修改了后台添加了留言公告，前台显示无公告及公告内容无法查看的问题 12.修改了前台留言及后台留言管理分页连接不正确的问题 13.修改了系统设置了虚拟目录后，无法远程存图的问题 14.修改了自由标签中栏目列表...
秀品博客系统 1.0.rar
05-27
程序及其简单，只有基本的管理员登录后台，发布文章，前台显示功能。和其他博客系统强大的功能没法比，开发此系统的目的仅供刚接触ASP.ENT MVC4的童鞋学习参考。 使用方式： 用VS2012打开，这是必须的，然后在你...
基于J2EE框架的个人博客系统项目毕业设计论文(源码和论文）
03-12
1、将业务层与表示层分离：使用JSP技术，网络开发人员可充分使用HTML来设计页面显示部分（如字体颜色等），并使用JSP指令或者JAVA程序片段来生成网页上的动态内容； 2、能够跨平台：JSP支持绝大部分平台，包括现在...
asp.net知识库
06-18
页面一postback，它就显示页面的最顶端，怎样让它定位在某一位置？ 如何保证页面刷新后的滚动条位置 清除网页历史记录，屏蔽后退按钮! 如何传值在2个页面之间 ：要求不刷新父页面，并且不能用Querystring传值 Asp...
java web利用数据库分页
05-14
java web 开发结合数据库对数据库的数据分页在jsp页面显示。
解决tab选择年月日
qq_43528934的博客
06-19 234
问题: 当点击2013时未选中以及展开栏没有收起来 解决： 添加到年月到input的方法不仅要在月份中调用，还要在年份中调用，这样就不会有上述问题了 贴此demo代码 html: <dl id="person"> <!-- 宝宝生日 --> <dd> <s&...
清除input默认样式，纯css自定义input checkbox样式
zengZeng的博客
01-04 2597
两种方式~ 一种是自己写一个checkbox的样式，如下： input[type="checkbox"]{ width:0.64rem; height:0.64rem; display: inline-block; text-align: center; vertical-align:baseline; line-height: 0.64rem; positio...
ajax获取文本框中信息,ajax在文本框中显示查询结果
weixin_32838901的博客
08-05 643
好吧，所以我在我的GoDaddy托管帐户上安装了jQuery。我需要在文本框中显示结果，并完成了我的HTML，它获取用户输入，单击按钮和结果区域(div id = status)。我只想将结果放在一个框中，而不必刷新页面。我正在尝试这个json的事情和AJAX来完成这一点，我试图找出我的尝试有什么问题。这是HTML。ajax在文本框中显示查询结果TestMiles Submit$('getdat...
取查询结果的几种方法
羚羊挂角
11-16 250
List: A. 查询语句中只查一个字段 [quote]Session session = HibernateSessionFactory.currentSession(); Transaction transaction = session.beginTransaction(); Query query = session.createQu...
SQL 查询详细内容
weixin_72067140的博客
07-02 4542
一.简单查询 注:SQL 中所有符号用英文格式 1.指定表中哪一列的查询 select 列名，列名，....列名 from 表名； 2.查询表中全部内容 select * from 表名； 3.注释 －－单行注释 /* */ 多行注释 4.别名 对象名 as 别名 举例: select sal as 工资 from emp ； 给表起别名时不能加as。 举例: select e.sal from emp e 注: 方便起见，给列名、表名起别名时as都省略...
HTML 3D表白爱心
MOONCOM的博客
11-21 1万+
代码如下: Document @keyframes ani{ from{ transform:rotateY(0deg) rotateX(0deg); } to{ transform:rotateY(360deg) rotateX(360deg); } } body{ perspective:1000px; } #heart{ pos
HTML前台分页样例
MOONCOM的博客
06-22 8534
自己制作的一个分页示例，贴出来和大家分享一下： Document .rptIntfPortlet .portletBody .showSection{ font-size: 12px; } .rptIntfPortlet .portletBody .showSection .showBody .showMore span.input span{ d
图片轮播的实现原理+样例
MOONCOM的博客
03-01 5273
页面使用图片轮播效果，可以向用户更好的介绍自己的公司，从而增加公司的销售额。本次博客，我根据自己的理解，向想了解图片轮播的同学介绍一下图片轮播是如何实现的。不足之处，欢迎大牛们指点。 图片轮播，根据项目需求的不同，可以有不同的实现方法。 第一种方法是实现图片轮播的基本需求，代码很简单，前台图片轮播切换样式很单一，适应于要求快速开发的小型网站，且维护简单。 第二种方法不仅实现了图片轮播的基本需
用ssm写一个分页查询带页面显示
最新发布
06-11
好的，下面是一个简单的使用SSM框架实现分页查询并带页面显示的示例。假设我们要查询一个名为"student"的表中的数据并进行分页显示，具体步骤如下： 1. 在mapper.xml文件中编写SQL语句实现分页查询功能，例如： ``...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值