bootstrap 分页

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>