现在的位置: 首页 > web前端 > 正文

原生js+ajax分页组件

2020年02月18日 web前端 ⁄ 共 4855字 ⁄ 字号 评论关闭

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

1.定义分页组件DOM

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

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 = '共&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条数据'; 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", }})

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

以上就上有关原生js+ajax分页组件的相关介绍,要了解更多ajax, 分页组件内容请登录学步园。

抱歉!评论已关闭.