本文實(shí)例為大家分享了js+ajax分頁(yè)組件的具體代碼，供大家參考，具體內(nèi)容如下

1.定義分頁(yè)組件DOM

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

2.定義分頁(yè)組件類及實(shí)例方法：

// 分頁(yè)組件類function Pagination(_ref) { this.id = _ref.id; //分頁(yè)組件掛載的DOM節(jié)點(diǎn) this.curPage = _ref.curPage || 1; //初始頁(yè)碼 this.draw = _ref.draw; // 初始化分頁(yè)請(qǐng)求次數(shù) this.pageSize = _ref.pageSize || 5; //分頁(yè)個(gè)數(shù) this.pageLength = _ref.pageLength; //每頁(yè)多少條 this.pageTotal = 0; //總共多少頁(yè) this.dataTotal = 0; //總共多少數(shù)據(jù) this.ajaxParam = _ref.ajaxParam; // 分頁(yè)ajax this.showPageTotalFlag = _ref.showPageTotalFlag || false; //是否顯示數(shù)據(jù)統(tǒng)計(jì) this.showSkipInputFlag = _ref.showSkipInputFlag || false; //是否支持跳轉(zhuǎn) this.ul = document.createElement('ul'); this.init();};// 給實(shí)例對(duì)象添加公共屬性和方法Pagination.prototype = { init: function() { var pagination = document.getElementById(this.id); pagination.innerHTML = ''; this.ul.innerHTML = ''; pagination.appendChild(this.ul); var _this = this; _this.getPage(_this.curPage) .then( function( data ){  //首頁(yè)  _this.firstPage();  //上一頁(yè)  _this.lastPage();  //分頁(yè)  _this.getPages().forEach(function (item) {  var li = document.createElement('li');  if (item == _this.curPage) {   li.className = 'active';  } else {   li.onclick = function () {   _this.curPage = parseInt(this.innerHTML);   _this.init();   };  }  li.innerHTML = item;  _this.ul.appendChild(li);  });  //下一頁(yè)  _this.nextPage();  //尾頁(yè)  _this.finalPage();  //是否支持跳轉(zhuǎn)  if (_this.showSkipInputFlag) {  _this.showSkipInput();  }  //是否顯示總頁(yè)數(shù),每頁(yè)個(gè)數(shù),數(shù)據(jù)  if (_this.showPageTotalFlag) {  _this.showPageTotal();  } } )  }, // 分頁(yè)數(shù)據(jù)請(qǐng)求 getPage: function( curPage ){ var _this = this; _this.draw++; return new Promise( function( resolve, reh ){  $.ajax( {  url: _this.ajaxParam.url,  type: _this.ajaxParam.type,  dataType: "json",  data: {   curPage: curPage,   pageLength: 10,   draw: _this.draw  },  success: function(data) {   if( data.isSuccess === true ){   var data = data;   _this.pageTotal = Math.ceil( parseFloat( data.data.totalResult/_this.pageLength ) ),   _this.dataTotal = data.data.totalResult,   _this.draw = data.data.draw;   resolve( data )   }else {   reject( "請(qǐng)求錯(cuò)誤" )   }  },  error: function(err) {   reject( err )  }  } ) }) }, //首頁(yè) firstPage: function() { var _this = this; var li = document.createElement('li'); li.innerHTML = '首頁(yè)'; this.ul.appendChild(li); li.onclick = function () {  var val = parseInt(1);  _this.curPage = val;  _this.init(); }; }, //上一頁(yè) lastPage: function() { var _this = this; var li = document.createElement('li'); li.innerHTML = '<'; if (parseInt(_this.curPage) > 1) {  li.onclick = function () {  _this.curPage = parseInt(_this.curPage) - 1;  _this.init();  }; } else {  li.className = 'disabled'; } this.ul.appendChild(li); }, //分頁(yè) getPages: function() { var pag = []; if (this.curPage <= this.pageTotal) {  if (this.curPage < this.pageSize) {  //當(dāng)前頁(yè)數(shù)小于顯示條數(shù)  var i = Math.min(this.pageSize, this.pageTotal);  while (i) {   pag.unshift(i--);  }  } else {  //當(dāng)前頁(yè)數(shù)大于顯示條數(shù)  var middle = this.curPage - Math.floor(this.pageSize / 2),   //從哪里開(kāi)始   i = this.pageSize;  if (middle > this.pageTotal - this.pageSize) {   middle = this.pageTotal - this.pageSize + 1;  }  while (i--) {   pag.push(middle++);  }  } } else {  console.error('當(dāng)前頁(yè)數(shù)不能大于總頁(yè)數(shù)'); } if (!this.pageSize) {  console.error('顯示頁(yè)數(shù)不能為空或者0'); } return pag; }, //下一頁(yè) nextPage: function() { var _this = this; var li = document.createElement('li'); li.innerHTML = '>'; if (parseInt(_this.curPage) < parseInt(_this.pageTotal)) {  li.onclick = function () {  _this.curPage = parseInt(_this.curPage) + 1;  _this.init();  }; } else {  li.className = 'disabled'; } this.ul.appendChild(li); }, //尾頁(yè) finalPage: function() { var _this = this; var li = document.createElement('li'); li.innerHTML = '尾頁(yè)'; this.ul.appendChild(li); li.onclick = function () {  var yyfinalPage = _this.pageTotal;  var val = parseInt(yyfinalPage);  _this.curPage = val;  _this.init(); }; }, //是否支持跳轉(zhuǎn) showSkipInput: function() { var _this = this; var li = document.createElement('li'); li.className = 'totalPage'; var span1 = document.createElement('span'); span1.innerHTML = '跳轉(zhuǎn)到'; li.appendChild(span1); var input = document.createElement('input'); input.setAttribute("type","number"); input.onkeydown = function (e) {  var oEvent = e || event;  if (oEvent.keyCode == '13') {  var val = parseInt(oEvent.target.value);  if (typeof val === 'number' && val <= _this.pageTotal && val>0) {   _this.curPage = val;  }else{   alert("請(qǐng)輸入正確的頁(yè)數(shù) !")  }  _this.init();  } }; li.appendChild(input); var span2 = document.createElement('span'); span2.innerHTML = '頁(yè)'; li.appendChild(span2); this.ul.appendChild(li); }, //是否顯示總頁(yè)數(shù),每頁(yè)個(gè)數(shù),數(shù)據(jù) showPageTotal: function() { var _this = this; var li = document.createElement('li'); li.innerHTML = '共 ' + _this.pageTotal + ' 頁(yè)'; li.className = 'totalPage'; this.ul.appendChild(li); var li2 = document.createElement('li'); li2.innerHTML = '每頁(yè) ' + _this.pageLength + ' 條'; li2.className = 'totalPage'; this.ul.appendChild(li2); var li3 = document.createElement('li'); li3.innerHTML = '共 ' + _this.dataTotal + ' 條數(shù)據(jù)'; li3.className = 'totalPage'; this.ul.appendChild(li3); var li4 = document.createElement('li'); li4.innerHTML = _this.curPage + "/" + _this.pageTotal; li4.className = 'totalPage'; this.ul.appendChild(li4); }};