自己写了一个分页，觉得蛮好用，放上来大家看看
代码里面已经有比较详细的注释，就不解释了
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style>
*{
margin:0;padding:0;
}
.table{
line-height: 22px;
width:80%;
font-size: 13px;
word-break:break-all;
cursor: default;
BORDER: #FFFFFF 1px solid;
background-color:#FFFFFF;
border-collapse:collapse ;
border-Color:#B9B9B9;
margin: 0 auto;
margin-top:10px;
}
.pageDiv{
position: absolute;
left: 10%;
width:600px;
}
</style>
</head>
<body>
<table border=1 class='table' >
<tbody id="tbody"></tbody>
</table>
<div id='pageDiv' class='pageDiv'></div>
</body>
<script>
function Page(o,callback){
o=o||{};
var el = o.el;
//初始化数据
this.pageNum=o.pageNum||0,this.pageSize=o.pageSize||10,this.totalCount=o.totalCount||0;
this.callback=callback||function(){};
//生成分页的html
var html="<div>";
html+=' <table width="90%" border="0" algin=center style="margin-top:3px;font-size: 13px;">';
html+='<tr algin=center>';
html+='<td algin=center><div style="margin-left: 12px;">';
html+='<button id="firstPage" disabled style="letter-spacing: 3px;">首页</button> ';
html+='<button id="previous" disabled style="letter-spacing: 3px;">上一页</button> ';
html+='<button id="next" disabled style="letter-spacing: 3px;">下一页</button> ';
html+='<button id="last" disabled style="letter-spacing: 3px;">尾页</button> ';
html+='第<span id=customPageNumSpan> '+this.pageNum+'</span> 页/共计 <span id=customTotalPageSpan>0</span> 页,每页显示 '+this.pageSize+' 条,总共 </span><span id=customTotalCountSpan>0</span> 条记录';
html+='</div>';
html+='</td>';
html+='</tr>';
html+='</table>';
if(el && el.tagName && el.tagName.toLowerCase()=='div'){
el.innerHTML=html;
//给几个按钮增加点击事件
this.firstPage = document.getElementById("firstPage");
this.firstPage.addEventListener('click',firstQuery.bind(this));
this.previous = document.getElementById("previous");
this.previous.addEventListener('click',previousQuery.bind(this))
this.next = document.getElementById("next");
this.next.addEventListener('click',nextQuery.bind(this))
this.last = document.getElementById("last");
this.last.addEventListener('click',lastQuery.bind(this));
this.customTotalCountSpan=document.getElementById('customTotalCountSpan');
this.customPageNumSpan=document.getElementById('customPageNumSpan');
this.customTotalPageSpan=document.getElementById('customTotalPageSpan');
}else{
throw new Error("传入的对象必须是div！");
}
//几个点击按钮函数
function firstQuery(){//首页
this.pageNum=1;
this.query(1);
}
function previousQuery(){//上一页
this.pageNum--;
this.query(1);
}
function nextQuery(){//下一页
this.pageNum++;
this.query(1);
}
function lastQuery(){//尾页
this.pageNum=this.totalPage;
this.query(1);
}
}
//通知更新
Page.prototype.doUpdate=function(){
var total = Math.floor(this.totalCount/this.pageSize);
this.totalPage=this.totalCount%this.pageSize==0?total:total+1;
if(this.pageNum>this.totalPage){//超过总页数
this.pageNum=this.totalPage;
}else if(this.pageNum<=0){//小于等于0
this.pageNum=1;
}
//设置上一页下一页等按钮是否可用
if(this.totalPage==1){//总共只有一页
//所有的按钮不可用
this.firstPage.disabled=true;
this.previous.disabled=true;
this.next.disabled=true;
this.last.disabled=true;
}else{
if(this.pageNum==1 && this.totalPage!=1){//当前第1页
this.firstPage.disabled=true;
this.previous.disabled=true;
this.next.disabled=false;
this.last.disabled=false;
}else if(this.pageNum==this.totalPage){//最后一页
this.firstPage.disabled=false;
this.previous.disabled=false;
this.next.disabled=true;
this.last.disabled=true;
}else{//其他页
this.firstPage.disabled=false;
this.previous.disabled=false;
this.next.disabled=false;
this.last.disabled=false;
}
}
//设置显示文字的几个span内容
this.customTotalCountSpan.innerText=this.totalCount;
this.customTotalPageSpan.innerText=this.totalPage;
this.customPageNumSpan.innerText=this.pageNum;
}
//查询函数
Page.prototype.query=function(type){
if(!type){
//this.pageNum=1;
}
//调用传入的回单函数
this.callback(this);
}
//更新函数
Page.prototype.update=function(totalCount){
this.totalCount=totalCount;
//处理按钮是否可用等
this.doUpdate();
}
//配置对象
var pageObj={
el:document.getElementById("pageDiv"),//分页div dom对象
pageSize:10,//每页多少条
pageNum:1,//当前显示第几页
totalCount:totalCount//数据总数 这里可以不传，page.update(totalCount)再传就可以
}
//创建分页，第2个参数为分页时的回调函数
var page = new Page(pageObj,queryData);
function query(){
//调用插件的查询方法
page.query();
}
//
var tbody=document.getElementById('tbody');
var totalCount=100;
//查数据的函数
function queryData(){
var html='';
//这里用写死的数据，异步的话自己修改一下就好
for(var i=0;i<10;i++){
html+='<tr>';
var text1='第'+page.pageNum+'页 第'+(i+1)+'行第1列';
var text2='第'+page.pageNum+'页 第'+(i+1)+'行第2列';
var text3='第'+page.pageNum+'页 第'+(i+1)+'行第3列';
html+="<td align='center'>"+text1+"</td>";
html+="<td align='center'>"+text2+"</td>";
html+="<td align='center'>"+text3+"</td>"
html+='</tr>';
}
tbody.innerHTML=html;
//如果是异步，在回调函数里面调用这个就行，分页会根据totalCount来做相应的处理
page.update(totalCount);
/* 异步示例
var url='';
$.post(url,{r:Math.random()},pageNum:page.pageNum,pageSize:page.pageSize},function(data){
//通知分页发生了变更
page.update(data.totalCount);
//处理数据
genData(data.list);
});
*/
}
//页面打开的时候默认查询
query();
</script>
</html>