nav.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. function myPagination(_ref) {
  2. var pageSize = _ref.pageSize,
  3. pageTotal = _ref.pageTotal,
  4. curPage = _ref.curPage,
  5. id = _ref.id,
  6. getPage = _ref.getPage,
  7. showPageTotalFlag = _ref.showPageTotalFlag,
  8. showSkipInputFlag = _ref.showSkipInputFlag,
  9. pageAmount = _ref.pageAmount,
  10. dataTotal = _ref.dataTotal;
  11. this.pageSize = pageSize || 3; //分页个数
  12. this.pageTotal = pageTotal || 0; //总共多少页
  13. this.pageAmount = pageAmount || 13; //每页多少条
  14. this.dataTotal = dataTotal || 0; //总共多少数据
  15. this.curPage = curPage || 1; //初始页码
  16. this.ul = document.createElement('ul');
  17. this.id = id;
  18. this.getPage = getPage;
  19. this.showPageTotalFlag = showPageTotalFlag || false; //是否显示数据统计
  20. this.showSkipInputFlag = showSkipInputFlag || false; //是否支持跳转
  21. this.init();
  22. };
  23. // 给实例对象添加公共属性和方法
  24. myPagination.prototype = {
  25. init: function init() {
  26. var pagination = document.getElementById(this.id);
  27. pagination.innerHTML = '';
  28. this.ul.innerHTML = '';
  29. pagination.appendChild(this.ul);
  30. var that = this;
  31. //首页
  32. that.firstPage();
  33. //上一页
  34. that.lastPage();
  35. //分页
  36. that.getPages().forEach(function (item) {
  37. var li = document.createElement('li');
  38. if (item == that.curPage) {
  39. li.className = 'active';
  40. } else {
  41. li.onclick = function () {
  42. that.curPage = parseInt(this.innerHTML);
  43. that.init();
  44. that.getPage(that.curPage);
  45. };
  46. }
  47. li.innerHTML = item;
  48. that.ul.appendChild(li);
  49. });
  50. //下一页
  51. that.nextPage();
  52. //尾页
  53. that.finalPage();
  54. //是否支持跳转
  55. if (that.showSkipInputFlag) {
  56. that.showSkipInput();
  57. }
  58. //是否显示总页数,每页个数,数据
  59. if (that.showPageTotalFlag) {
  60. that.showPageTotal();
  61. }
  62. },
  63. //首页
  64. firstPage: function firstPage() {
  65. var that = this;
  66. var li = document.createElement('li');
  67. li.innerHTML = '首页';
  68. this.ul.appendChild(li);
  69. li.onclick = function () {
  70. var val = parseInt(1);
  71. that.curPage = val;
  72. that.getPage(that.curPage);
  73. that.init();
  74. };
  75. },
  76. //上一页
  77. lastPage: function lastPage() {
  78. var that = this;
  79. var li = document.createElement('li');
  80. li.innerHTML = '<';
  81. if (parseInt(that.curPage) > 1) {
  82. li.onclick = function () {
  83. that.curPage = parseInt(that.curPage) - 1;
  84. that.init();
  85. that.getPage(that.curPage);
  86. };
  87. } else {
  88. li.className = 'disabled';
  89. }
  90. this.ul.appendChild(li);
  91. },
  92. //分页
  93. getPages: function getPages() {
  94. var pag = [];
  95. if (this.curPage <= this.pageTotal) {
  96. if (this.curPage < this.pageSize) {
  97. //当前页数小于显示条数
  98. var i = Math.min(this.pageSize, this.pageTotal);
  99. while (i) {
  100. pag.unshift(i--);
  101. }
  102. } else {
  103. //当前页数大于显示条数
  104. var middle = this.curPage - Math.floor(this.pageSize / 2),
  105. //从哪里开始
  106. i = this.pageSize;
  107. if (middle > this.pageTotal - this.pageSize) {
  108. middle = this.pageTotal - this.pageSize + 1;
  109. }
  110. while (i--) {
  111. pag.push(middle++);
  112. }
  113. }
  114. } else {
  115. console.error('当前页数不能大于总页数');
  116. }
  117. if (!this.pageSize) {
  118. console.error('显示页数不能为空或者0');
  119. }
  120. return pag;
  121. },
  122. //下一页
  123. nextPage: function nextPage() {
  124. var that = this;
  125. var li = document.createElement('li');
  126. li.innerHTML = '>';
  127. if (parseInt(that.curPage) < parseInt(that.pageTotal)) {
  128. li.onclick = function () {
  129. that.curPage = parseInt(that.curPage) + 1;
  130. that.init();
  131. that.getPage(that.curPage);
  132. };
  133. } else {
  134. li.className = 'disabled';
  135. }
  136. this.ul.appendChild(li);
  137. },
  138. //尾页
  139. finalPage: function finalPage() {
  140. var that = this;
  141. var li = document.createElement('li');
  142. li.innerHTML = '尾页';
  143. this.ul.appendChild(li);
  144. li.onclick = function () {
  145. var yyfinalPage = that.pageTotal;
  146. var val = parseInt(yyfinalPage);
  147. that.curPage = val;
  148. that.getPage(that.curPage);
  149. that.init();
  150. };
  151. },
  152. //是否支持跳转
  153. showSkipInput: function showSkipInput() {
  154. var that = this;
  155. var li = document.createElement('li');
  156. li.className = 'totalPage';
  157. var span1 = document.createElement('span');
  158. span1.innerHTML = '跳转到';
  159. li.appendChild(span1);
  160. var input = document.createElement('input');
  161. input.setAttribute("type","number");
  162. input.onkeydown = function (e) {
  163. var oEvent = e || event;
  164. if (oEvent.keyCode == '13') {
  165. var val = parseInt(oEvent.target.value);
  166. if (typeof val === 'number' && val <= that.pageTotal) {
  167. that.curPage = val;
  168. that.getPage(that.curPage);
  169. }else{
  170. alert("跳转页数不能大于总页数 !")
  171. }
  172. that.init();
  173. }
  174. };
  175. li.appendChild(input);
  176. var span2 = document.createElement('span');
  177. span2.innerHTML = '页';
  178. li.appendChild(span2);
  179. this.ul.appendChild(li);
  180. },
  181. //是否显示总页数,每页个数,数据
  182. showPageTotal: function showPageTotal() {
  183. var that = this;
  184. var li = document.createElement('li');
  185. li.innerHTML = '共&nbsp' + that.pageTotal + '&nbsp页';
  186. li.className = 'totalPage';
  187. this.ul.appendChild(li);
  188. var li2 = document.createElement('li');
  189. li2.innerHTML = '每页&nbsp' + that.pageAmount + '&nbsp条';
  190. li2.className = 'totalPage';
  191. this.ul.appendChild(li2);
  192. var li3 = document.createElement('li');
  193. li3.innerHTML = '合计&nbsp' + that.dataTotal + '&nbsp条数据';
  194. li3.className = 'totalPage';
  195. this.ul.appendChild(li3);
  196. }
  197. };