jquery.pagination.js使用经验

引入js和css

jquery.pagination.js

/**
 * pagination分页插件
 * @version 1.3.1
 * @author mss
 * @url http://maxiaoxiang.com/jQuery-plugins/plugins/pagination.html
 *
 * @调用方法
 * $(selector).pagination();
 */
;(function (factory) {
    if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {
        // AMD或CMD
        define([ "jquery" ],factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node/CommonJS
        module.exports = function( root, jQuery ) {
            if ( jQuery === undefined ) {
                if ( typeof window !== 'undefined' ) {
                    jQuery = require('jquery');
                } else {
                    jQuery = require('jquery')(root);
                }
            }
            factory(jQuery);
            return jQuery;
        };
    } else {
        //Browser globals
        factory(jQuery);
    }
}(function ($) {

	//配置参数
	var defaults = {
		totalData: 0,			//数据总条数
		showData: 0,			//每页显示的条数
		pageCount: 9,			//总页数,默认为9
		current: 1,				//当前第几页
		prevCls: 'prev',		//上一页class
		nextCls: 'next',		//下一页class
		prevContent: '<',		//上一页内容
		nextContent: '>',		//下一页内容
		activeCls: 'active',	//当前页选中状态
		coping: false,			//首页和尾页
		isHide: false,			//当前页数为0页或者1页时不显示分页
		homePage: '',			//首页节点内容
		endPage: '',			//尾页节点内容
		keepShowPN: false,		//是否一直显示上一页下一页
		count: 3,				//当前页前后分页个数
		jump: false,			//跳转到指定页数
		jumpIptCls: 'jump-ipt',	//文本框内容
		jumpBtnCls: 'jump-btn',	//跳转按钮
		jumpBtn: '跳转',		//跳转按钮文本
		callback: function(){}	//回调
	};

	var Pagination = function(element,options){
		//全局变量
		var opts = options,//配置
			current,//当前页
			$document = $(document),
			$obj = $(element);//容器

		/**
		 * 设置总页数
		 * @param int page 页码
		 * @return opts.pageCount 总页数配置
		 */
		this.setPageCount = function(page){
			return opts.pageCount = page;
		};

       this.getPageSize = function(showData){
            return opts.showData = showData;
       };
		/**
		 * 获取总页数
		 * 如果配置了总条数和每页显示条数，将会自动计算总页数并略过总页数配置，反之
		 * @return int p 总页数
		 */
		this.getPageCount = function(){
			return opts.totalData || opts.showData ? Math.ceil(parseInt(opts.totalData) / opts.showData) : opts.pageCount;
		};

		/**
		 * 获取当前页
		 * @return int current 当前第几页
		 */
		this.getCurrent = function(){
			return current;
		};

		/**
		 * 填充数据
		 * @param int index 页码
		 */
		this.filling = function(index){
			current = index || opts.current;//当前页码
			var pageCount = this.getPageCount();//获取的总页数
			//输出总记录数
			var html = '<span style="width:200px">1-'+opts.showData+'&nbsp;&nbsp;共：'+opts.totalData+'&nbsp;条记录&nbsp;&nbsp;</span>';
			if(opts.keepShowPN || current > 1){//上一页
				html += '<a href="javascript:;" class="'+opts.prevCls+'">'+opts.prevContent+'</a>';
			}else{
				if(opts.keepShowPN == false){
					$obj.find('.'+opts.prevCls) && $obj.find('.'+opts.prevCls).remove();
				}
			}
			if(current >= opts.count + 2 && current != 1 && pageCount != opts.count){
				var home = opts.coping && opts.homePage ? opts.homePage : '1';
				html += opts.coping ? '<a href="javascript:;" data-page="1">'+home+'</a><span>...</span>' : '';
			}
			var end = current + opts.count;
			var start = '';
			//修复到最后一页时比第一页少显示两页
			start = current === pageCount ? current - opts.count - 2 : current - opts.count;
			((start > 1 && current < opts.count) || current == 1) && end++;
			(current > pageCount - opts.count && current >= pageCount) && start++;
			for (;start <= end; start++) {
				if(start <= pageCount && start >= 1){
					if(start != current){
						html += '<a href="javascript:;" data-page="'+start+'">'+ start +'</a>';
					}else{
						html += '<span class="'+opts.activeCls+'">'+start+'</span>';
					}
				}
			}
			if(current + opts.count < pageCount && current >= 1 && pageCount > opts.count){
				var end = opts.coping && opts.endPage ? opts.endPage : pageCount;
				html += opts.coping ? '<span>...</span><a href="javascript:;" data-page="'+pageCount+'">'+end+'</a>' : '';
			}
			if(opts.keepShowPN || current < pageCount){//下一页
				html += '<a href="javascript:;" class="'+opts.nextCls+'">'+opts.nextContent+'</a>'
			}else{
				if(opts.keepShowPN == false){
					$obj.find('.'+opts.nextCls) && $obj.find('.'+opts.nextCls).remove();
				}
			}
			html += opts.jump ? '<input type="text" class="'+opts.jumpIptCls+'"><a href="javascript:;" class="'+opts.jumpBtnCls+'">'+opts.jumpBtn+'</a>' : '';
			
			html += '<span style="width:70px;">共：'+this.getPageCount()+'页</span>'
			$obj.empty().html(html);
			//控制查询条件 查询后防止分页条消失  modify by xiaowenbo @ 2017年9月18日09:40:16
			var className = $obj.attr("class");
			$("."+className+"").show();
		};

		//绑定事件
		this.eventBind = function(){
			var that = this;
			var pageCount = that.getPageCount();//总页数
			var index = 1;
			$obj.off().on('click','a',function(){
				if($(this).hasClass(opts.nextCls)){
					if($obj.find('.'+opts.activeCls).text() >= pageCount){
						$(this).addClass('disabled');
						return false;
					}else{
						index = parseInt($obj.find('.'+opts.activeCls).text()) + 1;
					}
				}else if($(this).hasClass(opts.prevCls)){
					if($obj.find('.'+opts.activeCls).text() <= 1){
						$(this).addClass('disabled');
						return false;
					}else{
						index = parseInt($obj.find('.'+opts.activeCls).text()) - 1;
					}
				}else if($(this).hasClass(opts.jumpBtnCls)){
					if($obj.find('.'+opts.jumpIptCls).val() !== ''){
						index = parseInt($obj.find('.'+opts.jumpIptCls).val());
					}else{
						return;
					}
				}else{
					index = parseInt($(this).data('page'));
				}
				that.filling(index);
				typeof opts.callback === 'function' && opts.callback(that);
			});
			//输入跳转的页码
			$obj.on('input propertychange','.'+opts.jumpIptCls,function(){
				var $this = $(this);
				var val = $this.val();
				var reg = /[^\d]/g;
	            if (reg.test(val)) {
	                $this.val(val.replace(reg, ''));
	            }
	            (parseInt(val) > pageCount) && $this.val(pageCount);
	            if(parseInt(val) === 0){//最小值为1
	            	$this.val(1);
	            }
			});
			//回车跳转指定页码
			$document.keydown(function(e){
		        if(e.keyCode == 13 && $obj.find('.'+opts.jumpIptCls).val()){
		        	var index = parseInt($obj.find('.'+opts.jumpIptCls).val());
		            that.filling(index);
					typeof opts.callback === 'function' && opts.callback(that);
		        }
		    });
		};

		//初始化
		this.init = function(){
			this.filling(opts.current);
			this.eventBind();
			if(opts.isHide && this.getPageCount() == '1' || this.getPageCount() == '0') $obj.hide();
		};
		this.init();
	};

	$.fn.pagination = function(parameter,callback){
		if(typeof parameter == 'function'){//重载
			callback = parameter;
			parameter = {};
		}else{
			parameter = parameter || {};
			callback = callback || function(){};
		}
		var options = $.extend({},defaults,parameter);
		return this.each(function(){
			var pagination = new Pagination(this, options);
			callback(pagination);
		});
	};

}));

pagination.css

@charset "UTF-8";
.demo-image{
    width: 100%;
}
.M-box,.M-box1,.M-box2,.M-box3,.M-box4{
    position: relative;
    text-align: center;
    zoom: 1;
}
.M-box:before,.M-box:after,.M-box1:before,.M-box1:after ,.M-box2:before,.M-box2:after ,.M-box3:before,.M-box3:after,.M-box4:before,.M-box4:after{
    content:"";
    display:table;
}
.M-box:after,.M-box1:after,.M-box2:after,.M-box3:after,.M-box4:after{
    clear:both;
    overflow:hidden;
}
.M-box span,.M-box1 span,.M-box2 span,.M-box3 span,.M-box4 span{
    float: left;
    margin:0 5px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    color: #676A6C;
    font-size: 12px;
}
.M-box .active,.M-box1 .active,.M-box2 .active,.M-box3 .active,.M-box4 .active{
    float: left;
    margin:0 5px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    background: #337ab7;
    color: #fff;
    font-size: 12px;
    border: 1px solid #337ab7;
    border-radius:34px;
}
.M-box a,.M-box1 a,.M-box2 a,.M-box3 a,.M-box4 a{
    float: left;
    margin:0 5px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    background: #fff;
    border: 1px solid #ebebeb;
    color: #676A6C;
    font-size: 12px;
    border-radius:34px;
}
.M-box a:hover,.M-box1 a:hover,.M-box2 a:hover,.M-box3 a:hover,.M-box4 a:hover{
    color:#fff;
    background: #337ab7;
}
.M-box .next,.M-box .prev,.M-box1 .next,.M-box1 .prev{
    font-family: "Simsun";
    font-size: 16px;
    font-weight: bold;
}
.now,.count{
    padding:0 5px;
    color:#f00;
}
.M-box2 input{
    float: left;
    margin:0 5px;
    width: 34px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    background: #fff;
    border: 1px solid #ebebeb;
    outline: none;
    color: #676A6C;
    font-size: 12px;
    border-radius:34px;
}

使用：

引入js和css后封装成通用的分页方法

/*
		 * 自定义分页 jquery pagination
		 * 通用分页方法
		 * id : div的dom对象
		 * recordCount : 总条数
		 * pageSize : 一页多少条
		 * callback : 异步方法调用,研发人员传入function即可：例如
         * portal_bootstrap_component_frame_home.initFlowData,参数只有一个（页码）
		 * by whb 20190606
		 */
		doPagination:function(_classDom,recordCount,pageSize,callback){
			_classDom.pagination({
		          coping:true,
		          homePage:'首页',
		          endPage:'末页',
		          prevContent:'<',
		          nextContent:'>',
		          totalData:recordCount,
		          showData:pageSize,
		          jump: true,
		          callback:function(api){
		             /*
		              * 异步加载分页数据
		              * 这是异步请求，参数是页码
		              * 是通用方法，禁止随意修改
		              * by whb
		              */
		        	  
		        	  if (typeof callback === "function") {
		        		   // Call it, since we have confirmed it is callable
		        		   callback(api.getCurrent());
		        	  }
		         }
		        
		      });
		}

使用时，先发起后台请求，请求到数据并初始化分页，

initAllMessageData:function(pageNumber){
			var content = $(document.getElementById("content")).val();
			
			var dc = new DataSet();
			dc.setParameter("pageNum",pageNumber);
			dc.setParameter("pageSize",pageSize);
			//查询条件
			dc.setParameter("content",content);
			
			_application.requestData({
				"module":"message",
				"action":"SysMessageShowAction",
				"event":"showMsg",
				"dataSet":dc,
				"success":function(data){
					debugger;
			         var rowSet =  data.getRowSet("com.tp.message.view.SysMessageReciveSysMessageSendView");
			         
					 if (rowSet) {
			    		 //加载页面list by whb
			    		 portal_bootstrap_component_frame_home.doProduceMessageLi("allReadMessage",rowSet);
				     }
					 var _classDom = $(document.getElementById("allReadMessage-box").getElementsByClassName("M-box2"));
				     
//分页
portal_bootstrap_component_frame_home._initGridTable(_classDom,rowSet,portal_bootstrap_component_frame_home.initAllMessageDataCallBack);
				     
				 }
			});
		},
		initAllMessageDataCallBack:function(pageNumber){//回调方法
			var content = $(document.getElementById("content")).val();
			
			var dc = new DataSet();
			dc.setParameter("pageNum",pageNumber);
			dc.setParameter("pageSize",pageSize);
			//查询条件
			dc.setParameter("content",content);
			
			_application.requestData({
				"module":"message",
				"action":"SysMessageShowAction",
				"event":"showMsg",
				"dataSet":dc,
				"success":function(data){
					debugger;
			         var rowSet =  data.getRowSet("com.tp.message.view.SysMessageReciveSysMessageSendView");
			         
					 if (rowSet) {
			    		 //加载页面list by whb
			    		 portal_bootstrap_component_frame_home.doProduceMessageLi("allReadMessage",rowSet);
				     }
				     
				 }
			});
		},
		_initGridTable:function(_classDom,rowSet,callBack){
			if (rowSet) {
	    		 //分页
	    		 pageSize = rowSet.getPageSize();
	    		 var recordCount = rowSet._recordCount;
		    	_classDom.empty();
		    		
	    		 portal_bootstrap_component_frame_home.doPagination(_classDom, recordCount, pageSize, callBack)
	    	 }
		}

这里加载list的function就不在写出来了。

页面进入时加载方法：

this.initAllMessageData(1);

页面jsp需要分页的加上div

<!-- 分页 by whb -->
<div id="allReadMessage-box" style="padding-top:10px"><div class="M-box2"></div></div>

页面效果：