当前位置 主页 > 网站技术 > 代码类 >

    原生js+ajax分页组件

    栏目:代码类 时间:2020-01-30 15:08

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

    1.定义分页组件DOM

    <div  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);
     }
    };