<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; } });
时间: 2024-10-12 12:51:51