ajax分页插件 支持自定义

<style>
    	ul, li{
    		list-style: none;
    	}
    	.div_page{
    		-moz-user-select:none;
    	}	
    	.div_page li{
    		display: inline-block;
    		padding: 2px 8px;
    		border: 1px solid #ddd;
    		margin: 0px 2px;
    		cursor: pointer;
    	}
    	.active{
    		color: #fff;
    		background: #428bca;
    	}
    	.disable{
    		background: #ddd;
    		color: #aaa;
    	}
    </style>


    <ul class="div_page" onselectstart="return false">
		<li class="prev disable" data-pagebtn="-1"><a class="pointer " >上一页</a></li>
		<li class="next" data-pagebtn="1"><a class="pointer" >下一页</a></li>
	</ul>

  

$.fn.jqueryPageFun = function(options) {
		var defConfig = {
			total: 0,        //总条数
			onePageCount: 0, //每页条数
			currentPage: 0,  //当前页
			pageCount: 0,    //总页数
			pageChangeFun: function(){},
			ajaxSuccess: true
		}
		
		var timer;
		var opts = $.extend(defConfig,options);
		var obj = $(this);
		var prev = obj.find('.prev');
		var next = obj.find('.next');
		init();
		
		function init(){
			opts.pageCount = Math.ceil(opts.total/opts.onePageCount);
			var pageHtml = '';
			for(var i = 0; i<opts.pageCount; i++){
				if(i == (opts.currentPage-1)){
					pageHtml += '<li class="page_btn active" data-page="'+(i+1)+'"><a class="pointer">'+(i+1)+'</a></li>';
				}else{
					pageHtml += '<li class="page_btn" data-page="'+(i+1)+'"><a class="pointer">'+(i+1)+'</a></li>';
				}
			}
			prev.after(pageHtml);
		}
		
		//分页按钮
		obj.on('click', 'li:not(".disable")', function(){
			if($(this).data('pagebtn')){
				opts.currentPage += parseInt($(this).data('pagebtn'));
			}else{
				opts.currentPage = parseInt($(this).data('page'));
			}
			opts.ajaxSuccess = opts.pageChangeFun&&$.isFunction(opts.pageChangeFun)? opts.pageChangeFun(defConfig):'';
			if(opts.ajaxSuccess){
				opts.currentPage == opts.pageCount?(function(){obj.find('.next').addClass('disable')})():(function(){obj.find('.next').removeClass('disable')})();
				opts.currentPage == 1?(function(){obj.find('.prev').addClass('disable')})():(function(){obj.find('.prev').removeClass('disable')})();
				obj.find('li:eq('+opts.currentPage+')').addClass('active').siblings('li').removeClass('active');
			}else{
				alert('ajax返回错误');
			}
		});  
		
		return{
			getPageInfo: function(){
				return defConfig;
			}
		}
	}

  

//调用

var pageFun = $('.div_page').jqueryPageFun({
  total: 20,
  onePageCount: 3,
  currentPage: 1,
  pageChangeFun: function(defConfig){
    //分页信息
    console.log(defConfig); 

    //ajax是否成功 return true为成功 return false失败
    return true;
  }
});

  

posted @ 2015-06-15 13:42  幹掉上帝  阅读(188)  评论(0编辑  收藏  举报