利用JS将后台返回的数据分页展示

最新推荐文章于 2023-03-29 14:48:54 发布

ZCR_7

最新推荐文章于 2023-03-29 14:48:54 发布

阅读量5.8k

点赞数

分类专栏： JavaScript 文章标签： javascript 分页

本文链接：https://blog.youkuaiyun.com/ZCR_7/article/details/50134951

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种适用于数据量较小的场景，在前端使用JavaScript进行分页的方法。通过Ajax与后台交互，获取JSON格式的数据，然后利用JS操控HTML DOM实现分页功能。步骤包括：使用Ajax与后台通信，后台返回数据包含条数信息，根据总条数和每页显示数量计算页数，并跟踪当前页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做web项目的时候最容易碰到的就是分页的问题。今天分享一种方法，就是在前端利用js直接来进行分页。但是这种方法只是适用于数据量非常小的时候。初学js的人可以学习下。毕竟这里用到了js操控HTML DOM

总体步骤：

1：前台采用ajax技术与后台进行交互

2：后台返回的数据个数是json，为了方便，直接记录条数

3：记录总记录条数totalNum，总的页数：totalpage，当前在哪一页：curpage

var numInput =  document.getElementById("inputNum").value;//每页要显示的个数
			//var cTable = document.getElementById("companyTable");//表格
			var fPage = document.getElementById("firstPage");//首页
			var pPage = document.getElementById("prePage");//前一页
			var nPage = document.getElementById("nextPage");//后一页
			var lPage = document.getElementById("lastPage");//尾页
			var numPage = document.getElementById("pageNum");//总的页数
			var nowPage = document.getElementById("pageNow");//当前页
			var mainDiv = document.getElementById("Main-Div");//DIV
			if(totalNum % numInput == 0){
				totalPage = totalNum / numInput;
			}
			else{
				totalPage = totalNum / numInput + 1;
				totalPage = Math.floor(totalPage);//四舍五入
			}
			numPage.innerHTML = totalPage;//赋值
			lPage.onclick = function(){
				mainDiv.innerHTML = "";
				curPage = totalPage;
				var mark = totalNum - (totalPage-1)*numInput;
				nowPage.innerHTML = totalPage;
				for(var i=1;i<=mark;i++){
					var mCompanyId = companyJson.data[(totalPage-1)*numInput+i-1].companyId;
					var mCompanyIntor = companyJson.data[(totalPage-1)*numInput+i-1].companyIntro;
					var mCompanyManName = companyJson.data[(totalPage-1)*numInput+i-1].companyManName;
					var mCompanyManPwd = companyJson.data[(totalPage-1)*numInput+i-1].companyManPwd;
					var mCompanyName = companyJson.data[(totalPage-1)*numInput+i-1].companyName;
					var mCompanyPhone = companyJson.data[(totalPage-1)*numInput+i-1].companyPhone;

					var myDiv = document.createElement("div");//用来显示公司的名称
					myDiv.className = "myDivClass";
					var myH5 = document.createElement("h5");//用来显示公司的描述
					var pPhone = document.createElement("p");//联系方式
					var pPeople = document.createElement("p");//联系人
					var pIntor = document.createElement("p");//公司介绍
					myH5.innerHTML =  mCompanyName;
					pIntor.innerHTML = mCompanyIntor;
					pPeople.innerHTML = mCompanyManName;
					pPhone.innerHTML = mCompanyPhone;
					myDiv.appendChild(myH5);
					myDiv.appendChild(pIntor);
					myDiv.appendChild(pPeople);
					myDiv.appendChild(pPhone);
					mainDiv.appendChild(myDiv);
				}
				mainDiv.appendChild(myDiv);
				console.log(mainDiv);
			}