<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拉取所有数据,前端进行分页处理</title>
</head>
<body>
<div>
<div>
<table id="table">
<thead>
<tr>
<th>序号</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
</thead>
<tbody id="temp1-container">
<script id="temp1" type="text/template">
<% for(var k in data){ %>
<tr>
<td><%=Number(k)+1%></td>
<td><%=data[k].1%></td>
<td><%=data[k].2%></td>
<td><%=data[k].3%></td>
<td><%=data[k].4%></td>
<td><%=data[k].5%></td>
<td><%=data[k].6%></td>
<td><%=data[k].7%></td>
<td><%=data[k].8%></td>
<td><%=data[k].8%></td>
</tr>
<%}%>
</script>
</tbody>
</table>
<span style="width:350px;">
<a href="#" οnclick="page.prePage();">上一页</a>/<a href="#" οnclick="page.nextPage();">下一页</a>
<span id="divFood"></span>
第<input id="pageno" value="1" style="width:20px"/>页
<a href="#" οnclick="page.aimPage();">跳转</a></span>
</span>
</div>
</div>
</body>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/table-more-page.js"></script>
<script src="js/ejs.min.js"></script>
<script>
function pageNum() {
page = new Page(1,'table','temp1-container');//参数含义:每页显示条数;table的id;tbody的id
}
var tem1=document.getElementById("temp1").innerHTML;//表格数据
function getPageData(page) {//从后台拉取数据后再使用模板引擎-e.js
$.ajax({
type: "POST",
url: "接口地址",
data:{},
success:function (data) {
var html1=ejs.render(tem1,{data:data.enterpriseList});
document.getElementById("temp1-container").innerHTML = html1;
pageNum();//将数据进行分页
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert(JSON.parse(XMLHttpRequest.responseText).msg);
}
});
}
getPageData();
</script>
</html>
//table-more-page.js
function Page(iAbsolute,sTableId,sTBodyId,page)
{
this.absolute = iAbsolute; //每页最大记录数
this.tableId = sTableId;
this.tBodyId = sTBodyId;
this.rowCount = 0;//记录数
this.pageCount = 0;//页数
this.pageIndex = 0;//页索引
this.__oTable__ = null;//表格引用
this.__oTBody__ = null;//要分页内容
this.__dataRows__ = 0;//记录行引用
this.__oldTBody__ = null;
this.__init__(); //初始化;
};
/**//*
初始化
*/
Page.prototype.__init__ = function(){
this.__oTable__ = document.getElementById(this.tableId);//获取table引用
this.__oTBody__ = this.__oTable__.tBodies[this.tBodyId];//获取tBody引用
this.__dataRows__ = this.__oTBody__.rows;
this.rowCount = this.__dataRows__.length;
try{
this.absolute = (this.absolute <= 0) || (this.absolute>this.rowCount) ? this.rowCount : this.absolute;
this.pageCount = parseInt(this.rowCount%this.absolute == 0
? this.rowCount/this.absolute : this.rowCount/this.absolute+1);
}catch(exception){}
this.__updateTableRows__();
};
Page.prototype.GetBar=function(obj)
{
var bar= document.getElementById(obj.id);
bar.innerHTML= "每页"+this.absolute+"条/页"+this.rowCount+"条";// 第2页/共6页 首页 上一页 1 2 3 4 5 6 下一页 末页
}
/**//*
下一页
*/
Page.prototype.nextPage = function(){
if(this.pageIndex + 1 < this.pageCount){
this.pageIndex += 1;
this.__updateTableRows__();
}
};
/**//*
上一页
*/
Page.prototype.prePage = function(){
if(this.pageIndex >= 1){
this.pageIndex -= 1;
this.__updateTableRows__();
}
};
/**//*
首页
*/
Page.prototype.firstPage = function(){
if(this.pageIndex != 0){
this.pageIndex = 0;
this.__updateTableRows__();
}
};
/**//*
尾页
*/
Page.prototype.lastPage = function(){
if(this.pageIndex+1 != this.pageCount){
this.pageIndex = this.pageCount - 1;
this.__updateTableRows__();
}
};
/**//*
页定位方法
*/
Page.prototype.aimPage = function(){
var abc = document.getElementById("pageno");
var iPageIndex = abc.value;
var iPageIndex = iPageIndex*1;
if(iPageIndex > this.pageCount-1){
this.pageIndex = this.pageCount -1;
}else if(iPageIndex < 0){
this.pageIndex = 0;
}else{
this.pageIndex = iPageIndex-1;
}
this.__updateTableRows__();
};
/**//*
执行分页时,更新显示表格内容
*/
Page.prototype.__updateTableRows__ = function(){
var iCurrentRowCount = this.absolute * this.pageIndex;
var iMoreRow = this.absolute+iCurrentRowCount > this.rowCount ? this.absolute+iCurrentRowCount - this.rowCount : 0;
var tempRows = this.__cloneRows__();
var removedTBody = this.__oTable__.removeChild(this.__oTBody__);
var newTBody = document.createElement("TBODY");
newTBody.setAttribute("id", this.tBodyId);
for(var i=iCurrentRowCount; i < this.absolute+iCurrentRowCount-iMoreRow; i++){
newTBody.appendChild(tempRows[i]);
}
this.__oTable__.appendChild(newTBody);
this.__dataRows__ = tempRows;
this.__oTBody__ = newTBody;
//页脚显示分
var divFood = document.getElementById("divFood");//分页工具栏
divFood.innerHTML="";
var rightBar = document.createElement("divFood");
rightBar.setAttribute("display","");
rightBar.setAttribute("float","left");
rightBar.innerHTML="第"+(this.pageIndex+1)+"页/共"+this.pageCount+"页";
var isOK="Y";
var cssColor="";
divFood.appendChild(rightBar);
页脚显示分页结
};
/**//*
克隆原始操作行集合
*/
Page.prototype.__cloneRows__ = function(){
var tempRows = [];
for(var i=0; i<this.__dataRows__.length; i++){
tempRows[i] = this.__dataRows__[i].cloneNode(1);
}
return tempRows;
};
可能是原文的地址:可能是原文