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

在做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");//DIVif(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);}