标签:
<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;
}
});
标签:
原文地址:http://www.cnblogs.com/heqhbk/p/4576929.html