<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<style>
*{
margin:5px;
padding:0;
}
.table {
word-break: break-all;
cursor: default;
BORDER: #FFFFFF 1px solid;
background-color: #FFFFFF;
border-collapse: collapse;
border-Color: #E2B801;
width:60%;
}
.pager{padding:0;margin:0;white-space:nowrap}
.pager li{list-style:none;font-family:arial;font-size:14px;padding:2px;margin:5px;border:#333 1px solid;text-align:center;border-radius:5px;max-width:80px;width:25px;height:22px;line-height:22px;cursor:pointer;background:#fff;display:inline-block}
.pager li:hover{border:#4876ff 1px solid;color:#4876ff}
.pager li.pg-hidepage{display:none}
.pager li.pg-prev,li.pg-next{width:80px}
.pager li.pg-selected{border:#4876ff 1px solid;background:deepskyblue;color:white}
.pager li.pg-selected:hover{color:#000;cursor:default}
.pager li.pg-dislabel{color:#ccc;border:#ccc 1px solid;cursor:default}
.pager li.pg-dislabel:hover{border:#ccc 1px solid}
</style>
</head>
<body>
<div id="list"></div>
<div id="pager"></div>
<p id="loading" style='padding-left:10px;height:30px;'></p>
</body>
<script>
function loadPager(el,option){
var page_ul,pageSize,totalCount,curPage,nav_count,callback,totalPage,pagerId,nav_mid,nav_rela,
prevName='上一页',nextName='下一页',firstName='首页',lastName='尾页',
leftCount=0,rightCount=0,
btn_dislabel='pg-dislabel',btn_selected='pg-selected',btn_hide='pg-hidepage';
//初始化并设置一些默认值
init();
//显示分页
el.innerHTML=genHtml();
//给UL添加点击事件
handleClick();
//处理按钮
handleBtn();
//初次加载响应点击事件
callback(curPage);
function init(){
var $option = option || {};
pageSize=$option.pageSize||10;
totalCount=$option.totalCount||0;
curPage=$option.curPage||1;
nav_count=$option.nav_count||0;
callback=$option.callback||function(){};
//计算总页数
totalPage = parseInt(totalCount/pageSize)+((totalCount%pageSize>0)?1:0);
pagerId = "pager_ul_"+Math.round(Math.random()*(9999-1000)+1000);
nav_mid = Math.round(nav_count/2);
}
//生成显示分页的html
function genHtml (pager){
var html="<ul class='pager' id='"+pagerId+"'>";
html+="<li class='pg-prev' id='first'>"+firstName+"</li>";
html+="<li class='pg-prev' id='prev'>"+prevName+"</li>";
for(var i=0;i<totalPage; i++){
var page=(i+1);
if(i<nav_count ){//显示
html +="<li page='"+page+"' class='pg-showpage'>"+page+"</li>"
}else{//隐藏
html+="<li page='"+page+"' class='pg-hidepage'>"+page+"</li>"
}
}
html+="<li class='pg-next' id='next'>"+nextName+"</li>";
html+="<li class='pg-prev' id='last'>"+lastName+"</li>";
html+="</ul>";
return html;
}
function handleClick(){
page_ul = document.getElementById(pagerId);
//给UL添加事件
document.addEventListener?
page_ul.addEventListener('click',handleUl):page_ul.attachEvent('click',handleUl);
function handleUl(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.tagName.toUpperCase()!=='LI') return ;
//查找按钮是不是不可用的
var index = findIndex(class2Array(target),[btn_dislabel,btn_selected]);
if(index!==-1){//如果是不可用的,则不响应点击
return ;
}
var page_val;//按钮选择后当前页的值
//处理首页、上一页、下一页、尾页
if(target.id==='prev'){
page_val = curPage-1;
}else if(target.id==='next'){
page_val = curPage+1;
}else if(target.id==='first'){
page_val = 1;
}else if(target.id==='last'){
page_val = totalPage;
}else{
page_val = target.innerText;
}
curPage=parseInt(page_val);
//每次选择要重新处理按钮
handleBtn();
//响应点击事件
callback(curPage);
}
}
function handleBtn(){
//首页是否有效
var first = page_ul.firstChild;
if(curPage===1){
handleClass(first,btn_dislabel,'add');
}else{
handleClass(first,btn_dislabel,'del');
}
//前一页按钮是否有效
var prev = first.nextSibling;
if(curPage===1){
handleClass(prev,btn_dislabel,'add');
}else{
handleClass(prev,btn_dislabel,'del');
}
//nav_rela
if(curPage===1){
leftCount=0;
}else{
nav_rela = curPage-nav_mid;
leftCount = (leftCount+ nav_rela)>0?(leftCount+ nav_rela):0;
nav_mid += nav_rela;
}
if(curPage===totalPage){
rightCount=0;
}else{
rightCount = totalPage-nav_count-leftCount;//右边隐藏节点数
}
//选择当前页
for(var i=1;i<=totalPage; i++){
var page=(i+1);
if(i==curPage){//选择当前页
if(curPage===1 || curPage===totalPage){
handleClass(page_ul.childNodes[page],btn_hide,'del');
}
handleClass(page_ul.childNodes[page],btn_selected,'add');
}else{
if(leftCount<=0 || rightCount<=0){//左右隐藏节点或者为0的时候,要另外处理
if(leftCount<=0){
if(i<=nav_count){
handleClass(page_ul.childNodes[page],btn_hide,'del');
}else{
handleClass(page_ul.childNodes[page],btn_hide,'add');
}
}
if(rightCount<=0){
if(i>totalPage-nav_count){
handleClass(page_ul.childNodes[page],btn_hide,'del');
}else{
handleClass(page_ul.childNodes[page],btn_hide,'add');
}
}
}else{
if(i<=leftCount){
handleClass(page_ul.childNodes[page],btn_hide,'add');
}else if(i>leftCount+nav_count ){
handleClass(page_ul.childNodes[page],btn_hide,'add');
}else if(i<=(leftCount+nav_count)){
handleClass(page_ul.childNodes[page],btn_hide,'del');
}
}
handleClass(page_ul.childNodes[page],btn_selected,'del');
}
}
//最后一页按钮是否有效
var last = page_ul.lastChild;
if(curPage===totalPage||totalPage===0){
handleClass(last,btn_dislabel,'add');
}else{
handleClass(last,btn_dislabel,'del');
}
//下一页按钮是否有效
var next = last.previousSibling;
if(curPage===totalPage||totalPage===0){
handleClass(next,btn_dislabel,'add');
}else{
handleClass(next,btn_dislabel,'del');
}
}
//将元素el的class转换成数组
function class2Array(el){
var oldClass = el.className;
if(!oldClass) return [];
return oldClass.split(" ");
}
//添加或者删除当前el元素的指定class
function handleClass(el,className,type){
var arr = class2Array(el);
var index = findIndex(arr,className);
if(type==='add'){//添加
if(index===-1){
arr.push(className);
}
}else{
if(index!==-1){//删除某个元素
arr.splice(index,1);
}
}
el.className = arr.join(" ");
}
//根据传入的clas名来查到在数组中的下标
function findIndex(arr,c){
if(c instanceof Array){
for(var i=0;i<c.length;i++){
var num=findOnceIndex(arr,c[i]);
if(num!==-1){
return num;
}
}
}else {
return findOnceIndex(arr,c);
}
return -1;
}
function findOnceIndex(arr,c){
for(var i=0;i<arr.length;i++){
if(arr[i]===c){
return i;
}
}
return -1;
}
}
var pager = document.getElementById("pager");
var loading = document.getElementById("loading");
var listDiv = document.getElementById("list");
//组装数据
var list = [];
for(var i=1;i<=194;i++){
list.push({'a':'第'+i+'行a列数据','b':'第'+i+'行b列数据','c':'第'+i+'行c列数据','d':'第'+i+'行d列数据'});
}
var start,end,html,data,pageSize=10;
//加载分页
loadPager(pager,{
pageSize:pageSize,//每页显示条数
totalCount:list.length,//总记录数
curPage:1,//当前页数,不设置则默认1
nav_count:10,//显示多少个导航
callback:function(count){//点击翻页后的回调函数
loading.innerText="正在加载第("+count+")页的数据,请稍后.......";
start=(count-1)*pageSize,end = count * pageSize>list.length?list.length:count * pageSize;
html='<table border="1" class="table">';
for(start;start<end;start++){
data = list[start];
html +="<tr><td>"+data['a']+"</td><td>"+data['b']+"</td><td>"+data['c']+"</td><td>"+data['d']+"</td></tr>";
}
html +='</table>';
listDiv.innerHTML=html;
//做一个定时器为了看到刷新的效果
setTimeout(function(){
loading.innerText="";
},1000)
}
});
</script>
</html>
效果: