JavaScript实现可重用的分页查询

最新推荐文章于 2024-07-01 11:34:43 发布
最新推荐文章于 2024-07-01 11:34:43 发布
阅读量1.6k 收藏 6
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43521551/article/details/106763914
版权

简要介绍

  • 分页查询解决的海量数据如何分页查询显示的问题，大量数据的查询显示必须进行分页处理
  • 本代码的分页处理由本人独立设计，耗费很多很多时间不断地改进测试，最终设计了这样一个可定制的分页处理对象，可满足很多情况下的分页处理要求

Page实现可重用的分页查询

  • 本代码设计的核心在于创建一个Page对象直接量，用于整合整合分页查询必要的属性、方法
  • 本代码实现重用的关键，在于运用当前已设计好的Page对象，覆盖其中未实现的方法，进行具体实现
  • 本代码进行移植重用，为确保功能正常，请保留所依赖的选择器的基本样式，以及Page对象中定义的属性函数，当然在熟悉本代码的情况下，可自定义进行修改
Page对象实现分页方式：
	1. 定义一个外部的点击事件函数：如initDeal()
		Page.limitpage：有默认值，设置导航栏显示的数字按钮数，int类型
		Page.limitsize：有默认值，设置每页显示记录数，int类型
		Page.arrkey：设置与结果集key一致的每一列的名字arrkey，array类型
		Page.arrexplain：设置表头文字，与arrkey顺序一致，array类型
		Page.init(param,cnt)：设置查询数据库的参数、查询到的符合条件的总数量，JSON类型、int类型
		Page.initPage()：只调用一次，输出表格、导航栏
	2.重新覆盖内部函数Page.classifyPageQuery():
		设置后端查询条件、起始位置、每次查询数量，JSON类型
		用返回的结果设置 Page.recordset，这样将会被Page调用

JavaScript代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#innerpagebar{
						/* min-width: 520px; */
						width:100%;
						margin: 2em auto;
						/* border:1px solid #98D2F5; */
						border-radius: 5px;
					}
					/* 导航栏按钮外观 */
					#innerpagebar table{
						text-align:center;
						margin: 0.5em auto;
						padding:0.5px 4%;
					}
					/* 导航栏按钮基本样式 */
					#innerpagebar input[type="button"]{
						width:32px;
						font-weight: normal;
						text-align:center;
						outline: none;
						padding: 2px 0px;
						border-radius: 2px;
						border: 0.2px solid #2299ff;
					}
					#innerpagebar input[name="txbtn"]{
						width:44px;
					}
					/* 导航栏按钮-鼠标停留样式 */
					#innerpagebar input[type="button"]:hover{
						background-color:#3eccff;
					}
					/* 导航栏按钮-鼠标点击样式 */
					#innerpagebar input[type="button"]:active{
						background:#98d2f5;
					}
					/* 当前按钮 */
					#innerpagebar input.currpage{
						background-color:#98d2f5;
						pointer-events: none;
					}
					/* 当前按钮-鼠标停留样式 */
					#innerpagebar input.currpage:hover {
						cursor: pointer;
						border-color: #cfcfcf;
					}
					/* 当前按钮-鼠标点击样式*/
					#innerpagebar input.currpage:active {
						background-color: #3399FF;
					}
					/* 去除样式 */
					#innerpagebar input.oldpage{
						background-color:#CFCFCF;
						pointer-events: auto;
					}
					.contab{
						width:100%;
						height:380px;
					}
					/*input按钮基本样式  */
					input.btnbase {
						font-weight: normal;
						text-align: center;
						outline: none;
						padding: 2px;
						border-radius: 2px;
						border: 0.2px solid #2299ff;
					}
					
					input.btnbase:hover {
						cursor: pointer;
						background-color: #3eccff;
						border-color: #cfcfcf;
					}
					
					input.btnbase:active {
						text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
						background-color: #3399FF;
					}
					/* 奇偶选择器 */
						table.contab tr:nth-of-type(odd){background-color: #c3dde0;} 
						table.contab tr:nth-of-type(even){background-color: #d4e3e5;}
						table.contab {
							font-family: verdana,arial,sans-serif;
							font-size:11px;
							color:#333333;
							border-width: 1px;
							border-color: #a9c6c9;
							border-collapse: collapse;
						}
						table.contab th {
							border-width: 1px;
							padding: 5px;
							border-style: solid;
							border-color: #a9c6c9;
						}
						table.contab td {
							border-width: 1px;
							padding: 4px;
							border-style: solid;
							border-color: #a9c6c9;
						}
					
		</style>
		<script>
			// 自定义Page对象直接量
			var Page={
							// JSON对象，分页查询每次查询的结果集，每次需要设定
							recordset:"",
							//json结果集中的key
							arrkey:"",
							// json结果集的表头，必须要和arrkey一致
							arrexplain:"",
							// 显示按钮数量
							limitpage:8,
							// 每一页显示记录数量
							limitsize:10,
							// 总记录条数
							totalsize:0,
							// 总页数
							totalpage:0,
							//JSON对象，查询的参数
							param:"",
							// 导航栏第一页
							beginpage:0,
							// 导航栏最后一页
							endpage:0,
							// 当前导航按钮id
							currid:"",
							// 当前页码
							currpage:0,
							// 初始化参数，传递查询条件，符合条件的数量
							// 只进行初始化
							init:function(param,psize){
								this.param = param;
								// 总数量
								this.totalsize = psize;
								// 计算总页数
								this.totalpage = Math.ceil(this.totalsize/this.limitsize);
								if(this.totalpage>0){
									this.beginpage = 1;
									this.currpage = 1;
									this.currid = "page1";
								}
								// 确定导航栏范围
								if(this.totalpage<=this.limitpage){
									this.endpage = this.totalpage;
								}else{
									this.endpage = this.limitpage;
								}
							},
							// 首页 
							updateHomePage:function(){
								this.beginpage = 1;
								// 上一次的按钮去除样式
								this.changePageStyle("oldpage");
								//导航栏可显示的最大数字按钮，大于限制按钮数需要
								// 重新输出导航栏,翻到第一页
								if(this.endpage>this.limitpage){
									this.endpage = this.limitpage;
									this.currpage = 1;
									this.currid = "page1";
									this.printBar();
								//导航栏上的最大数字按钮在最大限制按钮数以内，
								// 无需输出导航栏，只需更新按钮样式
								}else{
									this.currpage = 1;
									this.currid = "page1";
								}
								// 当前的按钮设置样式
								this.changePageStyle("currpage");
								
							},
							
							// 点击尾页
							updateTailerPage:function(){
								// 上一次按钮去除样式
								this.changePageStyle("odlpage");
								//导航栏上当前包含尾页
								if(this.endpage==this.totalpage){
									this.currpage =this.endpage;
									var cnt = this.endpage - this.beginpage+1;
									this.currid = document.getElementById("page"+cnt).id;
								// 导航栏当前不包含尾页，说明还有下一页
								}else if(this.endpage < this.totalpage){
									this.beginpage = this.totalpage - this.limitpage+1;
									this.endpage = this.totalpage;
									this.currpage = this.totalpage;
									// 重输出导航栏
									this.printBar();
									this.currid = "page"+this.limitpage;
									// alert(this.currid);
									
								}
								// 设置当前页样式
								this.changePageStyle("currpage");
								
							},
							// 上一页更新
							updateLastPage:function(){
								
								var oldbtn = document.getElementById(this.currid);
								// 上一次的按钮去除样式
								this.changePageStyle("oldpage");
								
								// 当前页按钮不是导航栏第一个按钮，无需输出导航栏
								// 需要在当前页面更新样式
								if(this.currpage!=this.beginpage){
									var currbtn = oldbtn.parentElement.previousElementSibling.firstElementChild;
									this.currid = currbtn.id;
									this.currpage = this.currpage-1;
								// 当前页按钮如果是导航栏第一个按钮
								}else{
								// 导航栏第一个按钮前面还有上一页未显示，输出导航栏
								if(this.beginpage>this.limitpage){
									this.endpage = this.beginpage -1;
									this.beginpage = this.beginpage - this.limitpage;
									this.currpage = this.currpage-1;
									this.printBar();
									this.currid = "page"+this.limitpage;
								// 导航栏第一个按钮还有上一页，可能有不是首页，需要输出导航栏
								// 例如 页面 导航栏显示：2-11，需变换到1-10
								}else{
									this.beginpage = 1;
									this.endpage = this.limitpage; 
									this.currpage = this.currpage-1;
									this.printBar();
									this.currid = "page"+this.currpage;
								}
								}
								this.changePageStyle("currpage");
					},
					// 下一页更新
					updateNextPage:function(){
								var obj = document.getElementById(this.currid);
								// 去除上一次按钮样式
								this.changePageStyle("oldpage");
								// if(Page.currpage==1){
								// 	document.getElementById("homepage").className = "oldpage";
								// 	document.getElementById("lastpage").className = "oldpage";
								// }
								
								// // 上一次页面恢复
								// obj.className = "oldpage";
								// 导航栏当前页按钮不是当前最大数字按钮
								if(this.currpage!=this.endpage){
									var currbtn = obj.parentNode.nextElementSibling.firstChild;
									// 设置当前页按钮样式
									currbtn.className = "currpage";
									this.currid = currbtn.id;
									this.currpage += 1;
								// 导航栏当前页按钮已达到当前页最大数字按钮
								}else{
									
									// 导航栏还有下一页
									if(this.currpage<this.totalpage){
										var maxpage = this.currpage+this.limitpage;
										//输出导航栏，跳到下一页，如果能够显示完全
										if(maxpage>=this.totalpage){
											this.beginpage = this.totalpage - this.limitpage+1;
											this.endpage = this.totalpage;
											this.currpage += 1;
											this.printBar();
											var temp = this.currpage - this.beginpage+1;
											this.currid = "page"+temp;
											// document.getElementById(this.currid).className = "currpage";
										// 输出导航栏，不能够显示到尾页
										}else{
											this.beginpage = this.endpage+1;
											this.endpage = maxpage;
											this.currpage += 1;
											this.printBar();
											this.currid = "page1";
										}
										// 当前页禁用
										document.getElementById(this.currid).className = "currpage";
										
									// 恰好为尾页,没有下一页
									}
								}
								// 设置当前页样式
								this.changePageStyle("currpage");
								
							},
					// 点击数字按钮触发事件函数，不需要输出导航栏
					pageNumber:function(elembtn){
						
						// 上一次恢复
						this.changePageStyle("oldpage");
						
						// 更新
						this.currid = elembtn.id;
						
						//当前页
						Page.currpage = parseInt(elembtn.value);
						
						// 更新后
						this.changePageStyle("currpage");
						this.printTable();
					},
					// 计算查询起始位置，查询前调用
					getBeginPos:function(){
						return (this.currpage-1)*this.limitsize;
					},
					// 跳转到指定页面
					gotoPage:function(){
						
						var elembtn = document.getElementById("gotopage");
						//没有输入，返回
						if(elembtn.value==""){
							return;
						}
						var cnt = parseInt(elembtn.value);
						// 跳转页不在总页数的范围内，或者就是当前页，无需任何操作
						if(cnt<1 || cnt>this.totalpage || cnt==this.currpage){
							return;
						}
						// 需要跳转
						
						// 上次点击恢复
						this.changePageStyle("odlpage");
						// 更新
						// // 跳转的页面在导航栏上
						if(cnt>=this.beginpage && cnt<=this.endpage){
							this.currpage = cnt;
							var tempid = this.currpage - this.beginpage + 1; 
							this.currid = "page"+tempid;
						// 跳转的页面没有在导航栏上
						}else{
							// 导航栏往前翻
							if(cnt<this.beginpage){
								if(cnt<=this.limitpage){
									// alert("1");
									this.currpage = cnt;
									this.beginpage = 1;
									this.endpage = this.limitpage;
									this.printBar();
									this.currid = "page"+cnt;
								}else{
									// alert("2");
									this.endpage = cnt;
									this.beginpage = this.endpage - this.limitpage+1;
									this.currpage = cnt;
									this.printBar();
									this.currid = "page"+this.limitpage;
								}
							// 导航栏往后翻
							}else if(cnt>this.endpage){
								var tp = this.totalpage - this.limitpage;
								if(cnt>tp){
									this.beginpage = tp+1;
									this.endpage = this.totalpage;
									this.currpage = cnt;
									this.printBar();
									var sid = this.currpage-this.beginpage+1;
									this.currid = "page"+sid;
								}else{
									this.beginpage = cnt;
									this.endpage = cnt+this.limitpage-1;
									this.currpage = cnt;
									this.printBar();
									this.currid = "page1";
								}
							}
							}
							// 设置当前页样式
							this.changePageStyle("currpage");
							this.printTable();
						},
					// 文字按钮
					pageBtn:function(elembtn){
						var btnvalue = elembtn.value;
						switch(btnvalue){
							case "首页":this.updateHomePage();break;
							case "上一页":this.updateLastPage();break;
							case "下一页":this.updateNextPage();break;
							case "尾页":this.updateTailerPage();break;
						}
						this.printTable();
					},
					// 输出导航栏按钮范围
					printBar:function(){
								// 送页数为0返回
								if(this.totalpage==0){
									return;
								}
								var res = "";
								res += "<div id=\"innerpagebar\">";
								res += "<table><tr>";
								// 总页数大于2才显示首页、上一页、下一页、尾页
								if(this.totalpage>2){
								//首页按钮 
								res +="<td><input type=\"button\" name=\"txbtn\" id=\"homepage\" value=\"首页\" οnclick=\"Page.pageBtn(this)\"></td>";
								// 上一页
								res +="<td><input type=\"button\" name=\"txbtn\" id=\"lastpage\" value=\"上一页\" οnclick=\"Page.pageBtn(this)\"></td>";
								}
								// serial表示按钮上的值
								var serial = this.beginpage;
								// cnt表示id序号
								var cnt = 1;
								while(serial<=this.endpage){
									res += "<td><input type=\"button\" id=\"page"+cnt+"\" value=\""+serial+"\" οnclick=\"Page.pageNumber(this)\"></td>";
									serial += 1;
									cnt += 1;
								}
								if(this.totalpage>2){
								// 下一页
								res +="<td><input type=\"button\" name=\"txbtn\" id=\"nextpage\" value=\"下一页\" οnclick=\"Page.pageBtn(this)\"></td>";
								// 尾页
								res +="<td><input type=\"button\" name=\"txbtn\" id=\"tailerpage\" value=\"尾页\" οnclick=\"Page.pageBtn(this)\"></td>";
								res +="<td>跳转页：<input type=\"number\" id=\"gotopage\" step=\"1\" min=\"1\" value=\""+this.currpage+"\" max=\""+this.totalpage+"\"><input type=\"button\" value=\"GO\" οnclick=\"Page.gotoPage()\"></td>";
								}
								res +="<td><label>总页数："+this.totalpage+"</label></td>";	
							res += "</tr></table>";
							
							res +="</div>";
							// pagebardiv为显示导航栏的div块
							var con = document.getElementById("pagebardiv");
							// 嵌入到div块
							con.innerHTML=res;
							
					},
					// 该方法用于输出表格：
					// 		1.内部调用classifyPageQuery()
					// 		用于访问数据库返回结果，并给recordset赋值
					// 		2.将recordset以表格形式表格输出
					printTable:function(){
						// 调用classifyPageQuery分页查询，结果保存到Page.recordset中
						this.classifyPageQuery();
						if(this.recordset==null || this.recordset==""){
							alert("结果为空");
							return;
						}
						var res = "<table class=\"contab\">";
						// 表格字段
						var headarr = Page.arrexplain;
						res += "<tr>";
						for(var i=0;i<headarr.length;i++){
							res +="<th>"+headarr[i]+"</th>";
						}
						res += "</tr>";
						//每一行结果集的key
						var headks =  this.arrkey;
						for(var i=0;i<this.recordset.length;i++){
							
							res +="<tr>";
							var item = this.recordset[i];
							for(var k=0;k<headks.length;k++){
								res += "<td>"+item[headks[k]]+"</td>";
							}
							res +="</tr>";
						}
						res += "</table>";
						document.getElementById("pageview").innerHTML=res;
						
					},
					// 翻页改变样式
					changePageStyle:function(pstyle){
						if(this.totalpage==0){return;}
						document.getElementById(this.currid).className = pstyle;
						if(this.currpage==this.totalpage && this.totalpage>2){
							document.getElementById("nextpage").className = pstyle;
							document.getElementById("tailerpage").className = pstyle;
						}
						if(this.currpage==1 && this.totalpage>2){
							document.getElementById("homepage").className = pstyle;
							document.getElementById("lastpage").className = pstyle;
						}
					},
					// 第一次查询处理：
					// 		1.在init(param,cnt)方法之后调用
					// 		2.在第一次查询数据库结果集返回结果后调用
					// 		3.内部this.printTable()调用this.classifyPageQuery()
					// 		用于查询记录，设置结果集，并以表格形式输出
					// 		4.内部this.printBar()输出导航栏
					initPage:function(){
						this.printTable();
						this.printBar();
						this.changePageStyle("currpage");
					},	
					// 定义分页查询函数，需要覆盖：
					// 		设置后端查询条件、起始位置、每次查询数量，JSON类型
					// 		用返回的结果设置 Page.recordset，这样将会被Page调用
					classifyPageQuery:function(){alert("请覆盖Page.classifyPageQuery该方法")},
					
		}
		// Page实现分页步奏：
		// 	1. 定义一个外部的点击事件函数：如initDeal()
		// 		Page.limitpage：有默认值，设置导航栏显示的数字按钮数，int类型
		// 		Page.limitsize：有默认值，设置每页显示记录数，int类型
		// 		Page.arrkey：设置与结果集key一致的每一列的名字arrkey，array类型
		// 		Page.arrexplain：设置表头文字，与arrkey顺序一致，array类型
		// 		Page.init(param,cnt)：设置查询数据库的参数、查询到的符合条件的总数量，JSON类型、int类型
		// 		Page.initPage()：只调用一次，输出表格、导航栏
		// 	2.重新实现内部函数Page.classifyPageQuery():
		// 		设置后端查询条件、起始位置、每次查询数量，JSON类型
		// 		用返回的结果设置 Page.recordset，这样将会被Page调用
				
		
		
		// 覆盖分页查询函数，设置查询所得的结果集，输出表格前调用
		Page.classifyPageQuery=function(){
			// Page对象中的查询参数
			var params = Page.param;
			if(params==null || params==""){
				params = {};
			}
			// 查询结果集起始位置
			params.beginpos = Page.getBeginPos();
			// 每次查询的数量
			params.eachsize = Page.limitsize;
			// params作为json对象，作为参数进行查询
			
			//Params是一个JSON对象，然后调用ajax查询
			// 这是模仿查询数据库调用
			var result = [];
			var m = params.beginpos;
			var n = params.beginpos+params.eachsize;
			while(m<n && m<Page.totalsize){
				result.push(arr[m]);
				m++;
			}
			// 设置分页查询的结果集
			Page.recordset = result;
		}
		// arr模拟数据库中确定的记录数量
		var arr=[];
		// 模拟cnt条查询记录
		function initRecordSet(cnt){
			arr = []
			var max = 180;
			var min = 155;
			for(var i=1;i<=cnt;i++){
				var obj={};
				obj.id=i;
				obj.name="A-"+i;
				obj.sex="B-"+i;
				obj.height=parseInt(Math.random()*(max-min+1)+min,10);
				arr.push(obj);
			}
			// alert(JSON.stringify(arr));
		}	
		// 首次进行查询调用
		// 	设置查询条件param，查询到的总数量，按钮数量、每页显示的数量
		function initDeal(){
			// 获取查询到的总记录数量
			var sizes = document.getElementById("pageid").value;
			if(sizes==""){
				return;
			}
			var cnt = parseInt(sizes);
			// 设置数字按钮数量
			var lsz = document.getElementById("limitpage").value;
			if(lsz!=""){
				Page.limitpage = parseInt(lsz);
			}
			// 设置每页显示的记录数量
			var recordsize = document.getElementById("limitsize").value;
			if(recordsize!=""){
				Page.limitsize = parseInt(recordsize);
			}
			//设置与结果集key一致的每一列的名字arrkey
			Page.arrkey = ["id","name","sex","height"];
			// 设置表头
			Page.arrexplain = ["编号","姓名","性别","身高"];
			
			// 初始化参数：
			// 第一个参数为查询条件，第二个参数为总记录数量
			Page.init(null,cnt);
			// 设置Page.recordset,表示第一次对结果集查询的所得的记录集
			initRecordSet(cnt);
			// 第一次查询结果集，输出导航栏和表格
			Page.initPage();
		}
		
		</script>
	</head>
	<body>
		总记录数量：<input type="number" value="104" name="pagenumber" id="pageid" min="0">
		按钮数量：<input type="number" value="11" id="limitpage" min="0">
		每页数量：<input type="number" value="8" id="limitsize" min="0">
		<button type="button" onclick="initDeal()">初始化</button>
		<!-- <button type="button" onclick="printTable()">显示表格</button> -->
		<div id="pagebardiv"></div>
		<div id="pageview"></div>
	</body>
</html>

测试效果

在这里插入图片描述

littleshimmer
关注
专栏目录
js分页查询
weixin_34249678的博客
10-24 524
/*** 分页说明：* 因为是JS分页，所以有2个方法必须自己手动写入，分别是getMaxCount（）和findPage（）* getMaxCount（）为获得当前的记录总数，* findPage（）为根据下方的3个变量查找的列表。* 然后还需在页面的最下方增加一个div,div的DIV为pageTool*/var pageCount=10;//每页数量var ...
js表格，可实现，分页、查询等操作
10-17
js表格，可实现客户端，分页、查询等操作,
用JavaScript实现分页功能
最新发布
qq_52530691的博客
07-01 1785
用JavaScript实现分页功能
通过JavaScript实现分页及搜索查询
Aeporn的博客
04-26 2481
// 通过url获取参数 let url = context.ctx.request.originalUrl; // 解析url中的汉字 url = decodeURI(url); let select = {}; // 将搜索条件转为一个对象 if (url.indexOf('?') != -1) { let arr = url.slice(u...
js实现列表分页、查询(等细节处置)的功能
Wzmlzrr的博客
01-06 1467
在前面的分析中，我们可以知道，查询的数组就是未查询的分页数组过滤之后的新数组，之后创建页面的逻辑也是一样，因此在整体封装创建页面的方法之前，我们可以添加一个字段去判断是否进行了查询，是，就用新数组，否，就用原始的数组。区别无非在于拆分的这个数组有所变化对吧，这是根据查询生成的一个新的数组，其他按部就班的来就没问题了。分页一般来说，主要包括：上下页切换的功能、点击页码跳转某一页的功能以及直达某一页的功能，那目标就是正确的显示当前页的数据以及分页中的页码及其他数据，然后再注意一些其他的细节就可以了。
js信息管理系统《二》分页与查询
weixin_46073353的博客
05-23 337
这里我们接上篇 增删查改做完以后，信息管理不可能只有增删查改，所以我们为这个增加一些功能 分页的思路很简单，大家不要想复杂。我们只需要将我们想看到的显示出来，不想看到的隐藏掉就行了，即做一个区间，区间内的数据显示，区间外的隐藏，通过更改区间达到数据的切换，实现分页功能 function fy() { var num = 10; var all = Math.ceil(ul.length / num) var now = 1
【js】实现分页查询操作的步骤
tyrantForever的博客
08-04 549
1、将CSS的代码复制到goodList.jsp 2、引入common 代码实现： <%@ include file="../common/common.jsp"%> 3、引入jstl 代码实现： <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 注意： 这一行必须放在调用co...
JQuery+Ajax实现数据查询、排序和分页功能
10-23
JQuery+Ajax实现数据查询、排序和分页功能涉及的知识点主要包括以下几个方面： 1. JQuery和Ajax的基本概念和作用： - JQuery是一个快速、小巧、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和...
使用Vue构建可重用的分页组件
12-10
在Vue.js中构建可重用的分页组件是一项常见的任务，因为分页功能在很多Web应用中都至关重要，它能够优化加载性能并提供良好的用户体验。本文将深入探讨如何利用Vue来设计一个动态、灵活的分页组件。 首先，分页组件...
springboot+vue+elementui实现增删改查和分页查询
09-20
在本项目中，"springboot+vue+elementui实现增删改查和分页查询"是一个基于现代Web技术栈的简单但实用的应用示例。它整合了Spring Boot、Vue.js和Element UI，这三个组件分别在后端、前端和UI设计方面发挥关键作用，...
Javascript vue.js表格分页，ajax异步加载数据
10-21
在JavaScript和Vue.js框架中，实现表格分页和AJAX异步加载数据是常见的需求，尤其是在处理大量数据时，为了提高用户体验，我们会将数据分批加载。以下将详细讲解这个过程。 首先，Vue.js允许我们创建自定义组件，...
纯js分页-用js实现分页显示
01-05
纯js分页,用js将内容以分页的形式展现出来，处理数据更简单
纯js实现分页(后台查询出所有数据,前端再分页)
weixin_43244841的博客
07-22 2564
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <!DOCTYPE html
纯js实现分页查询的前端效果
weixin_30855099的博客
03-15 179
下载地址　　https://files.cnblogs.com/files/han-guang-xue/fy-%E5%88%86%E9%A1%B5.zip 向后台请求数据的时候,将maxPage和和curPage参数修改即可 maxPage;分页的总页数 curPage:当前页 转载于:https://www.cnblogs.com/han-guang-xue/p/10538...
js 分页功能实现
m0_72759446的博客
05-12 985
当表单数据过多时，查看起来比较不方便吗，这个时候就需要分页查看。
采用原生js分页模板TurnPage实现分页查询thinkphp5.1数据
yang1234567898的博客
03-22 1031
目的： 由于thinkphp官方自带的翻页按钮太丑了，加上想用js实现，最重要的是，找前端的朋友帮忙做，他说这个实现之后也会跟模板不兼容，还说我不懂，我立马就查找资料搞起来 第一步：js填充翻页按钮 html: <div class="pagelist"></div> <script> //获取翻页div的节点 var wrapper = document.querySelector('.p..
简单的分页代码js实现
SeekerTime
07-10 8729
先看看效果图： 简单的分页js代码: 1、效果描述： 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单，效果很棒 2、调用方法：$(".tcdPageCode").createPage({ pageCount:10, current:1, backFn:function(p){ //单击回调方法，p是当前页码 } }
javascript实现分页效果
前端岚枫
06-18 2987
一般的页面我们实现分页效果都是用跳转的形式，但是有些需求需要我们在不跳转页面的同时完成分页效果，简单的一个实现例子：window.onload = function(){ page({ id:'pageBox', nowNum:7, allNum:10, callbac
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值