原生js+ajax分页组件
作者:一期一会 时间:2024-05-21 10:12:06
本文实例为大家分享了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",
}
})
来源:https://blog.csdn.net/qq_34832846/article/details/89880719
标签:js,ajax,分页组件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
缓存是如何实现的?
2009-11-01 15:35:00
在Python程序和Flask框架中使用SQLAlchemy的教程
2021-10-28 06:14:21
python 给图像添加透明度(alpha通道)
2021-05-04 04:57:22
![](https://img.aspxhome.com/file/2023/3/98983_0s.jpg)
mysql启动的error 2003和1067错误问题解决方法
2024-01-28 14:20:38
详解Pytest测试用例的执行方法
2022-02-15 18:28:14
![](https://img.aspxhome.com/file/2023/4/68434_0s.png)
Python文件和流(实例讲解)
2023-08-02 19:11:45
关于Vue3中defineProps用法图文详解
2023-07-02 16:55:56
![](https://img.aspxhome.com/file/2023/0/139830_0s.jpg)
Python中列表的一些基本操作知识汇总
2022-04-08 07:12:28
![](https://img.aspxhome.com/file/2023/1/97421_0s.jpg)
SQLServer日期函数总结案例详解
2024-01-13 07:50:49
![](https://img.aspxhome.com/file/2023/6/113536_0s.png)
PHP chunk_split()函数讲解
2023-06-09 13:54:44
![](https://img.aspxhome.com/file/2023/5/55395_0s.png)
Flask-Sqlalchemy的基本使用详解
2023-06-16 19:40:02
![](https://img.aspxhome.com/file/2023/4/76044_0s.jpg)
Ajax改造:使用Ajax和jQuery改进现有站点
2010-04-02 12:50:00
![](https://img.aspxhome.com/file/UploadPic/20104/2/1709330-53s.jpg)
Pytorch参数注册和nn.ModuleList nn.ModuleDict的问题
2021-02-10 23:43:06
python实现sm2和sm4国密(国家商用密码)算法的示例
2021-11-17 08:02:13
解决pycharm中opencv-python导入cv2后无法自动补全的问题(不用作任何文件上的修改)
2023-08-24 00:25:21
![](https://img.aspxhome.com/file/2023/5/61205_0s.jpg)
用户研究中的人物角色
2010-02-08 12:15:00
js中的内部属性与delete操作符介绍
2024-04-10 16:15:12
基于opencv实现简单画板功能
2022-08-25 14:41:41
![](https://img.aspxhome.com/file/2023/7/104917_0s.jpg)
python用什么编辑器进行项目开发
2021-04-17 19:25:20
MySQL环境下导入数据时是否需要禁用索引
2009-01-04 12:42:00