pagination.js
;(function()
{
window.DelinPagination=function DelinPagination(totalPages,pageSize,pageNum){
window.totalPages=(totalPages?totalPages:0)//总页数
window.pageSize=(pageSize?pageSize:10);//每页显示几条
window.pageNum=(pageNum?pageNum:1);//第几页
}
DelinPagination.prototype._packPageAjax=function(pageNum,IsFirst,AjaxFn){
if(IsFirst){
var str='<ul>'
+'<li class="on">1</li>'
for(var i=1;i<pageSize;i++){
str+= '<li>'+(i+1)+'</li>'
}
str+= '</ul>'
$('.pageList').html(str)
}
$('#span_pageNum').html(pageNum);
$('#span_countPage').html(totalPages);
}
DelinPagination.prototype.pageDown=function(){
console.log("下一页");
var pageEnd=$('.pageList ul li').eq($('.pageList ul li').length-1).html()
if(parseInt(pageEnd)>=totalPages){
return false;
}
$('.pageList ul li').each(function(index,ele){
if ( parseInt( $( ele ).html() ) + pageSize<=parseInt( totalPages )){
$( ele ).html( parseInt( $( ele ).html() ) + pageSize );
}
else
{
$( ele ).html( parseInt( $( ele ).html() ) + pageSize );
$( ele ).hide();
}
$(ele).removeClass('on')
})
$('.pageList ul li').eq(0).addClass('on')
var pageNum=$('.pageList ul li.on').html();
this._packPageAjax(pageNum)
}
DelinPagination.prototype.pageUp=function(){
console.log("上一页");
if ( parseInt( $( '.pageList ul li.on' ).html() ) -pageSize <= 0 )
{
return false
}
console.log( "上一页" );
$( '.pageList ul li' ).each( function ( index, ele )
{
$( ele ).removeClass( 'on' )
$( ele ).show();
var curPage = parseInt( $( ele ).html() ) - pageSize;
if ( curPage < 1 )
{
return false
}
else
{
$( ele ).html( curPage );
}
} )
$( '.pageList ul li' ).eq( 0 ).addClass( 'on' )
var pageNum=$('.pageList ul li.on').html();
console.log(pageNum);
this._packPageAjax(pageNum)
}
DelinPagination.prototype.pageFirst=function(){
console.log("上一页");
$('.pageList ul li').each(function(index,ele){
$(ele).show()
var curPage=index+1;
if(curPage<1){
return false
}
else{
$(ele).html(curPage);
}
});
$('.pageList ul li').removeClass('on');
$('.pageList ul li').eq(0).addClass('on');
var pageNum=$('.pageList ul li.on').html();
// debugger
console.log(pageNum);
//加上请求数据地址
_packPageAjax(pageNum);
this._packPageAjax(pageNum)
}
DelinPagination.prototype.pageEnd=function(){
$('.pageList ul li').each(function(index,ele){
var IsHide=(totalPages<=parseInt($('.pageList ul li').eq(index-1).html()))
if(IsHide){
$(ele).hide()
}
var curPage=totalPages-(9-index);
if(curPage<1){
return false
}
else{
$(ele).html(curPage);
}
});
$('.pageList ul li').removeClass('on');
$('.pageList ul li').eq($('.pageList ul li').length-1).addClass('on');
var pageNum=$('.pageList ul li.on').html();
// debugger
console.log(pageNum);
this._packPageAjax(pageNum)
}
})()
调用
$(function(){
//总页数
var totalPages=67;
//每页显示的条数
var pageSize=10;
//开始发起ajax请求
var pageNum=1;
DelinPagination=new DelinPagination(67,10,1)
_packPageAjax(pageNum,true);
function _packPageAjax(pageNum,IsFirst){
// $.ajax({
// url: '/path/to/file',
// type: 'default GET (Other values: POST)',
// dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
// data: {param1: 'value1'},
// success:function(data){
// },
// error:function(err){
// }
// });
if(IsFirst){
var str='<ul>'
+'<li class="on">1</li>'
for(var i=1;i<pageSize;i++){
str+= '<li>'+(i+1)+'</li>'
}
str+= '</ul>'
$('.pageList').html(str)
}
$('#span_pageNum').html(pageNum);
$('#span_countPage').html(totalPages);
}
$('.pageList ul li').click(function(){
$('.pageList ul li').removeClass('on');
$(this).addClass('on');
//加上请求数据地址
var pageNum=$(this).html();
console.log(pageNum);
_packPageAjax(pageNum);
});
//下一页
$('.pageDown').click(function(){
DelinPagination.pageDown();
});
//上一页
$('.pageUp').click(function(){
DelinPagination.pageUp();
});
//首页
$('.pageFirst').click(function(){
DelinPagination.pageFirst();
});
//末页
$('.pageEnd').click(function(){
console.log("末页");
});
})
HTML
<div id="pageGro" class="cb">
<div class="pageFirst">首页</div>
<div class="pageUp">上一页</div>
<div class="pageList">
</div>
<div class="pageDown">下一页</div>
<div class="pageEnd">末页</div>
<div class="pageSum">第<span id="span_pageNum"></span>页/ 共<span id="span_countPage"></span>页</div>
</div>