原生js+ajax分页组件

前端之家收集整理的这篇文章主要介绍了原生js+ajax分页组件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了js+ajax分页组件的具体代码,供大家参考,具体内容如下

1.定义分页组件DOM

  1. <div id="pagination" class="pagination"></div>

2.定义分页组件类及实例方法

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

3.实例化分页组件

  1. let pageInstance = new Pagination({
  2. id: 'pagination',curPage:1,// 初始页码,不填默认为1
  3. draw: 0,// 当前渲染次数统计
  4. pageLength: 10,//每页多少条
  5. pageSize: 5,//分页个数,不填默认为5
  6. showPageTotalFlag:true,//是否显示数据统计,不填默认不显示
  7. showSkipInputFlag:true,//是否支持跳转,不填默认不显示
  8. ajaxParam: { //分页ajax
  9. url: 'https://www.easy-mock.com/mock/5cc6fb7358e3d93eff3d812c/page',type: "get",}
  10. })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

猜你在找的Ajax相关文章