1.自定义 bootstrap 分页功能,一个简单的js实现,自己写的,分享一下,喜欢的请点赞哈!
2.下面附上 demo 下载,有问题给我留言
demo中有点小问题,请复制以下代码测试一下
/* * ........ demo ......... $('.page').pagelist({ size:10, count:1000, items:15, currpage:1, click:null} ); * */ jQuery.fn.extend({ pagelist:function(ps,param){ var $this = this; this.ps = ps; this.element = $(this); if($this.element.length==0){ console.debug('element is not found ....'); return; } var data = this.data('params'); if(data==undefined||data==null){ var pageparams = { size:0, count:0, items:5, currpage:1, pagecount:0, click:null }; $this.pageparams = $this.data('params',pageparams); } this.pageparams = this.data('params'); if(typeof ps == 'string'){ $this.ps = param; } if($this.ps!=null&&$this.ps!==undefined){ $.each($this.ps,function(k,v){ if(v!=''&&v!=null){ $this.pageparams[k] = v; } }); } $.each($this.pageparams,function(k,v){ if(k=='click'&&v!=null&&v!=undefined&&typeof v !='function'){ console.debug('click require a funciton ....'); }else if(k!='click'&&isNaN(v)&&v!=''){ console.debug( k + ' error...............') }else if(typeof v == 'string'){ $this.pageparams[k] = parseInt(v); } }); this.bind = function(){ $this.find('.first').click(function(e){ e.preventDefault(); $(this).removeClass('active'); pageparams.currpage = 1; $this.change(pageparams); }); $this.find('.last').click(function(e){ e.preventDefault(); $(this).removeClass('active'); pageparams.currpage = pageparams.pagecount; $this.change(pageparams); }); $this.find('.next').click(function(e){ e.preventDefault(); if(pageparams.currpage>=pageparams.pagecount){ return; } pageparams.currpage = pageparams.currpage+1; $this.change(pageparams); }); $this.find('.prev').click(function(e){ e.preventDefault(); if(pageparams.currpage<=1){ return; } pageparams.currpage = pageparams.currpage-1; $this.change(pageparams); }); return $this; }; this.apppend = function (begin,end,pageparams){ $this.element.find('.active').removeClass('active'); for(var i = begin;i<=end;i++){ var pageli = $('<li>'); pageli.append('<a href="javascript:void(0)">'+i+'</a>'); $this.element.find('.next').before(pageli); if(i==pageparams.currpage){ pageli.addClass('active'); continue; } pageli.on('click',function(e){ e.preventDefault(); var val = $(this).find('a').text(); if(isNaN(val)==false&&val!=''){ val = parseInt(val); } if(pageparams.click!=null){ pageparams.click($(this),val); } pageparams.currpage = val; $this.change(pageparams); }); } return $this; } this.change = function (){ var pageparams = $this.data('params'); $this.find('.active').removeClass('active'); var pageCount = parseInt((pageparams.count + pageparams.size - 1) / pageparams.size); pageparams.pagecount = pageCount; $this.find('.next,.prev,.first,.last').removeClass('disabled').show(); if(pageparams.currpage==1||isNaN(pageCount)||pageCount==0){ $this.find('.first,.prev').addClass('disabled'); } if(pageparams.currpage==pageparams.pagecount||isNaN(pageCount)||pageCount==0){ $this.find('.last,.next').addClass('disabled'); } $this.find('li:not(".next,.prev,.first,.last")').remove(); if(pageparams.pagecount<=0||isNaN(pageCount)){ return; } pageparams.currpage = parseInt(pageparams.currpage); if(pageparams.currpage<=0){ pageparams.currpage=1; } var temp = parseInt(pageparams.currpage-pageparams.items/2) var count = pageCount-pageparams.currpage; // var begin = p.currpage-(p.items%2==0?p.items/2:p.items/2+1); // var end = p.currpage+(p.items%2==0?p.items/2:p.items/2+1); var begin = parseInt(pageparams.currpage-(pageparams.items/2)); var end = parseInt(pageparams.currpage+(pageparams.items/2)); if(begin<=0){ end = end-begin+1; begin = 1; } if(end>=pageparams.pagecount){ begin -= end - pageparams.pagecount; end = pageparams.pagecount; } if(end<pageparams.pagecount){ end = end - 1; } $this.apppend(begin, end, pageparams) return $this; } if(typeof ps == 'string'){ eval(('$this.'+ps+'()')); }else{ if($this.element.find('.pagination').length==0){ var pagestr = '<nav><ul class="pagination"><li class="first"><a href="javascript:void(0)">首页</a></li><li class="prev"><a href="javascript:void(0)" fui-arrow-left">上一页</a></li><li class="next"><a href="javascript:void(0)" class="fui-arrow-right">下一页</a></li><li class="last"><a href="javascript:void(0)">尾页</a></li></ul></nav>'; $this.append(pagestr); $this.find('.next,.prev,.first,.last').unbind('click'); $this.bind(); } $this.change(); } return $this; } });
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>page list</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/page.js"></script>
</head>
<body>
<div class="page"></div>
<div class="page1"></div>
</body>
<script type="text/javascript">
$(function(){
$('.page1').pagelist(
{
size:10,
count:1000,
items:10,
currpage:1,
click:function(page,pageNo){
console.debug('pageNo = ' + pageNo);
}
}
)
$('.page').pagelist({
size:10,
count:1000,
items:15,
currpage:1,
click:null}
);
setTimeout(function(){
$('.page').pagelist({items:8});
},2000)
})
</script>
</html>