1 /**
  2  * @version 1.1
  3  * @author ideawu@163.com
  4  * @link http://www.ideawu.net/
  5  * @class
  6  * 分页控件, 使用原生的JavaScript代码编写. 重写onclick方法, 获取翻页事件,
  7  * 可用来向服务器端发起AJAX请求.
  8  *
  9  * @param {String} id: HTML节点的id属性值, 控件将显示在该节点中.
 10  * @returns {PagerView}: 返回分页控件实例.
 11  *
 12  * @example
 13  * ### HTML:
 14  * <div id="pager"></div>
 15  *
 16  * ### JavaScript:
 17  * var pager = new PagerView('pager');
 18  * pager.index = 3; // 当前是第3页
 19  * pager.size = 16; // 每页显示16条记录
 20  * pager.itemCount = 100; // 一共有100条记录
 21  *
 22  * pager.onclick = function(index){
 23  *	alert('click on page: ' + index);
 24  *	// display data...
 25  * };
 26  *
 27  * pager.render();
 28  * 
 29  */
 30 var PagerView = function(id){
 31 	var self = this;
 32 	this.id = id;
 33 
 34 	this._pageCount = 0; // 总页数
 35 	this._start = 1; // 起始页码
 36 	this._end = 1; // 结束页码
 37 
 38 	/**
 39 	 * 当前控件所处的HTML节点引用.
 40 	 * @type DOMElement
 41 	 */
 42 	this.container = null;
 43 	/**
 44 	 * 当前页码, 从1开始
 45 	 * @type int
 46 	 */
 47 	this.index = 1;
 48 	/**
 49 	 * 每页显示记录数
 50 	 * @type int
 51 	 */
 52 	this.size = 15;
 53 	/**
 54 	 * 显示的分页按钮数量
 55 	 * @type int
 56 	 */
 57 	this.maxButtons = 9;
 58 	/**
 59 	 * 记录总数
 60 	 * @type int
 61 	 */
 62 	this.itemCount = 0;
 63 
 64 	/**
 65 	 * 控件使用者重写本方法, 获取翻页事件, 可用来向服务器端发起AJAX请求.
 66 	 * 如果要取消本次翻页事件, 重写回调函数返回 false.
 67 	 * @param {int} index: 被点击的页码.
 68 	 * @returns {Boolean} 返回false表示取消本次翻页事件.
 69 	 * @event
 70 	 */
 71 	this.onclick = function(index){
 72 		return true;
 73 	};
 74 
 75 	/**
 76 	 * 内部方法.
 77 	 */
 78 	this._onclick = function(index){
 79 		var old = self.index;
 80 
 81 		self.index = index;
 82 		if(self.onclick(index) !== false){
 83 			self.render();
 84 		}else{
 85 			self.index = old;
 86 		}
 87 	};
 88 
 89 	/**
 90 	 * 在显示之前计算各种页码变量的值.
 91 	 */
 92 	this._calculate = function(){
 93 		self._pageCount = parseInt(Math.ceil(self.itemCount / self.size));
 94 		self.index = parseInt(self.index);
 95 		if(self.index > self._pageCount){
 96 			self.index = self._pageCount;
 97 		}
 98 		if(self.index < 1){
 99 			self.index = 1;
100 		}
101 
102 		self._start = Math.max(1, self.index - parseInt(self.maxButtons/2));
103 		self._end = Math.min(self._pageCount, self._start + self.maxButtons - 1);
104 		self._start = Math.max(1, self._end - self.maxButtons + 1);
105 	};
106 
107 	/**
108 	 * 获取作为参数的数组落在相应页的数据片段.
109 	 * @param {Array[Object]} rows
110 	 * @returns {Array[Object]}
111 	 */
112 	this.page = function(rows){
113 		self._calculate();
114 
115 		var s_num = (self.index - 1) * self.size ;
116 		var e_num = self.index * self.size;
117 
118 		return rows.slice(s_num, e_num);	
119 	};
120 
121 	/**
122 	 * 渲染控件.
123 	 */
124 	this.render = function(){
125 		var div = document.getElementById(self.id);
126 		div.view = self;
127 		self.container = div;
128 
129 		self._calculate();
130 
131 		var str = '';
132 		str += '<div class="PagerView">\n';
133 		if(self._pageCount > 1){
134 			if(self.index != 1){
135 				str += '<a href="javascript://1"><span>|<</span></a>';
136 				str += '<a href="javascript://' + (self.index-1) + '"><span><<</span></a>';
137 			}else{
138 				str += '<span>|<</span>';
139 				str += '<span><<</span>';
140 			}
141 		}
142 		for(var i=self._start; i<=self._end; i++){
143 			if(i == this.index){
144 				str += '<span class="on">' + i + "</span>";
145 			}else{
146 				str += '<a href="javascript://' + i + '"><span>' + i + '</span></a>';
147 			}
148 		}
149 		if(self._pageCount > 1){
150 			if(self.index != self._pageCount){
151 				str += '<a href="javascript://' + (self.index+1) + '"><span>>></span></a>';
152 				str += '<a href="javascript://' + self._pageCount + '"><span>>|</span></a>';
153 			}else{
154 				str += '<span>>></span>';
155 				str += '<span>>|</span>';
156 			}
157 		}
158 		str += ' 一共' + self._pageCount + '页, ' + self.itemCount + '条记录 ';
159 		str += '</div><!-- /.pagerView -->\n';
160 
161 		self.container.innerHTML = str;
162 
163 		var a_list = self.container.getElementsByTagName('a');
164 		for(var i=0; i<a_list.length; i++){
165 			a_list[i].onclick = function(){
166 				var index = this.getAttribute('href');
167 				if(index != undefined && index != ''){
168 					index = parseInt(index.replace('javascript://', ''));
169 					self._onclick(index)
170 				}
171 				return false;
172 			};
173 		}
174 	};
175 
176 }
177