js+ajax如何實(shí)現(xiàn)分頁組件

小編給大家分享一下js+ajax如何實(shí)現(xiàn)分頁組件，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

具體內(nèi)容如下

1.定義分頁組件DOM

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

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

// 分頁組件類
function Pagination(_ref) {
 this.id = _ref.id; //分頁組件掛載的DOM節(jié)點(diǎn)
 this.curPage = _ref.curPage || 1; //初始頁碼
 this.draw = _ref.draw; // 初始化分頁請求次數(shù)
 this.pageSize = _ref.pageSize || 5; //分頁個數(shù)
 this.pageLength = _ref.pageLength; //每頁多少條
 this.pageTotal = 0; //總共多少頁
 this.dataTotal = 0; //總共多少數(shù)據(jù)
 this.ajaxParam = _ref.ajaxParam; // 分頁ajax
 this.showPageTotalFlag = _ref.showPageTotalFlag || false; //是否顯示數(shù)據(jù)統(tǒng)計
 this.showSkipInputFlag = _ref.showSkipInputFlag || false; //是否支持跳轉(zhuǎn)
 this.ul = document.createElement('ul');

 this.init();
};

// 給實(shí)例對象添加公共屬性和方法
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 ){
  //首頁
  _this.firstPage();
  //上一頁
  _this.lastPage();
  //分頁
  _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);
  });
  //下一頁
  _this.nextPage();
  //尾頁
  _this.finalPage();

  //是否支持跳轉(zhuǎn)
  if (_this.showSkipInputFlag) {
  _this.showSkipInput();
  }
  //是否顯示總頁數(shù),每頁個數(shù),數(shù)據(jù)
  if (_this.showPageTotalFlag) {
  _this.showPageTotal();
  }
 } )
 
 },
 // 分頁數(shù)據(jù)請求
 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( "請求錯誤" )
   }
  },
  error: function(err) {
   reject( err )
  }
  } )
 })
 },
 //首頁
 firstPage: function() {
 var _this = this;
 var li = document.createElement('li');
 li.innerHTML = '首頁';
 this.ul.appendChild(li);
 li.onclick = function () {
  var val = parseInt(1);
  _this.curPage = val;
  _this.init();
 };
 },
 //上一頁
 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);
 },
 //分頁
 getPages: function() {
 var pag = [];
 if (this.curPage <= this.pageTotal) {
  if (this.curPage < this.pageSize) {
  //當(dāng)前頁數(shù)小于顯示條數(shù)
  var i = Math.min(this.pageSize, this.pageTotal);
  while (i) {
   pag.unshift(i--);
  }
  } else {
  //當(dāng)前頁數(shù)大于顯示條數(shù)
  var middle = this.curPage - Math.floor(this.pageSize / 2),
   //從哪里開始
   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)前頁數(shù)不能大于總頁數(shù)');
 }
 if (!this.pageSize) {
  console.error('顯示頁數(shù)不能為空或者0');
 }
 return pag;
 },
 //下一頁
 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);
 },
 //尾頁
 finalPage: function() {
 var _this = this;
 var li = document.createElement('li');
 li.innerHTML = '尾頁';
 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("請輸入正確的頁數(shù) !")
  }
  _this.init();
  }
 };
 li.appendChild(input);
 var span2 = document.createElement('span');
 span2.innerHTML = '頁';
 li.appendChild(span2);
 this.ul.appendChild(li);
 },
 //是否顯示總頁數(shù),每頁個數(shù),數(shù)據(jù)
 showPageTotal: function() {
 var _this = this;
 var li = document.createElement('li');
 li.innerHTML = '共&nbsp' + _this.pageTotal + '&nbsp頁';
 li.className = 'totalPage';
 this.ul.appendChild(li);
 var li2 = document.createElement('li');
 li2.innerHTML = '每頁&nbsp' + _this.pageLength + '&nbsp條';
 li2.className = 'totalPage';
 this.ul.appendChild(li2);
 var li3 = document.createElement('li');
 li3.innerHTML = '共&nbsp' + _this.dataTotal + '&nbsp條數(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);
 }
};

3.實(shí)例化分頁組件

let pageInstance = new Pagination({
 id: 'pagination',
 curPage:1, // 初始頁碼,不填默認(rèn)為1
 draw: 0, // 當(dāng)前渲染次數(shù)統(tǒng)計
 pageLength: 10, //每頁多少條
 pageSize: 5, //分頁個數(shù),不填默認(rèn)為5
 showPageTotalFlag:true, //是否顯示數(shù)據(jù)統(tǒng)計,不填默認(rèn)不顯示
 showSkipInputFlag:true, //是否支持跳轉(zhuǎn),不填默認(rèn)不顯示
 ajaxParam: { //分頁ajax
 url: 'https://www.easy-mock.com/mock/5cc6fb7358e3d93eff3d812c/page',
 type: "get",
 }
})

看完了這篇文章，相信你對“js+ajax如何實(shí)現(xiàn)分頁組件”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！