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