本文例項為大家分享了js+ajax分頁元件的具體程式碼，供大家參考，具體內容如下

1.定義分頁元件DOM

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

2.定義分頁元件類及例項方法：

// 分頁元件類
function Pagination(_ref) {
 this.id = _ref.id;  //分頁元件掛載的DOM節點
 this.curPage = _ref.curPage || 1; //初始頁碼
 this.draw = _ref.draw;  // 初始化分頁請求次數
 this.pageSize = _ref.pageSize || 5; //分頁個數
 this.pageLength = _ref.pageLength; //每頁多少條
 this.pageTotal = 0; //總共多少頁
 this.dataTotal = 0; //總共多少資料
 this.ajaxParam = _ref.ajaxParam; // 分頁ajax
 this.showPageTotalFlag = _ref.showPageTotalFlag || false; //是否顯示資料統計
 this.showSkipInputFlag = _ref.showSkipInputFlag || false; //是否支援跳轉
 this.ul = document.createElement('ul');

 this.init();
};

// 給例項物件新增公共屬性和方法
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();

   //是否支援跳轉
   if (_this.showSkipInputFlag) {
    _this.showSkipInput();
   }
   //是否顯示總頁數,每頁個數,資料
   if (_this.showPageTotalFlag) {
    _this.showPageTotal();
   }
  } )
  
 },// 分頁資料請求
 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) {
    //當前頁數小於顯示條數
    var i = Math.min(this.pageSize,this.pageTotal);
    while (i) {
     pag.unshift(i--);
    }
   } else {
    //當前頁數大於顯示條數
    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('當前頁數不能大於總頁數');
  }
  if (!this.pageSize) {
   console.error('顯示頁數不能為空或者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();
  };
 },//是否支援跳轉
 showSkipInput: function() {
  var _this = this;
  var li = document.createElement('li');
  li.className = 'totalPage';
  var span1 = document.createElement('span');
  span1.innerHTML = '跳轉到';
  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("請輸入正確的頁數 !")
    }
    _this.init();
   }
  };
  li.appendChild(input);
  var span2 = document.createElement('span');
  span2.innerHTML = '頁';
  li.appendChild(span2);
  this.ul.appendChild(li);
 },//是否顯示總頁數,資料
 showPageTotal: function() {
  var _this = this;
  var li = document.createElement('li');
  li.innerHTML = '共 ' + _this.pageTotal + ' 頁';
  li.className = 'totalPage';
  this.ul.appendChild(li);
  var li2 = document.createElement('li');
  li2.innerHTML = '每頁 ' + _this.pageLength + ' 條';
  li2.className = 'totalPage';
  this.ul.appendChild(li2);
  var li3 = document.createElement('li');
  li3.innerHTML = '共 ' + _this.dataTotal + ' 條資料';
  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.例項化分頁元件

let pageInstance = new Pagination({
 id: 'pagination',curPage:1,// 初始頁碼,不填預設為1
 draw: 0,// 當前渲染次數統計
 pageLength: 10,//每頁多少條
 pageSize: 5,//分頁個數,不填預設為5
 showPageTotalFlag:true,//是否顯示資料統計,不填預設不顯示
 showSkipInputFlag:true,//是否支援跳轉,不填預設不顯示
 ajaxParam: { //分頁ajax
  url: 'https://www.easy-mock.com/mock/5cc6fb7358e3d93eff3d812c/page',type: "get",}
})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。