原生js实现分页效果
更新时间：2020年9月24日 00:18 点击：2599
本文实例为大家分享了js实现分页效果的具体代码，供大家参考，具体内容如下
效果如下：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<div id="page-nation"></div>
<script src="./page.js"></script>
<script>
//分页调用方法
const Api=new pageNation({
el:"#page-nation",//分页器位置
page:1,//当前页
size:5,//默认5,10,15,20
total:100,//数据总条数
styUrl:
'./page.css',//样式地址（可修改）
IsShowBtn: {//设置需要显示的按钮
choosePageSize: true,//是否显示下拉选项
IsShowPrevOrNextBtn: true,//是否显示上一页下一页按钮
IsShowEnterBtn: true,//是否显示跳转输入
IsShowTotalPage:true,//是否显示总页数
},
callback:function(page,size,total){
console.log(page,size,total);
//此处为ajax请求
}
});
</script>
</body>
</html>
page.js
var pageNation;
pageNation = (function () {
function extend(target, source) {
for (var obj in source) {
target[obj] = source[obj];
}
return target;
}
function pageNation(options) {
var defaultOptions = {
el: "body",//分页父容器
page: 1,
size: 10,
total: 0,
styUrl: 'style.css',
callback: null,
IsShowBtn: {//设置需要显示的按钮
choosePageSize: true,//是否显示下拉选项
IsShowPrevOrNextBtn: true,//否显示上一页下一页按钮
IsShowEnterBtn: true,//是否显示跳转输入
IsShowTotalPage:true,//是否显示总页数
}
};
this.options = extend(defaultOptions, options) || {};
this.options.el = document.querySelectorAll(this.options.el)[0];
this.pageT = Math.ceil(this.options.total / this.options.size);
this.init();
if (!document.querySelector("#dynamic-style")) {
this.pageStyle();
}
//this.options.callback(1,self.options.size,self.options.total);
}
var proto = pageNation.prototype || {};
proto.rander = function (page, size, total) {
this.options.page = !!page ? page : 1;
this.options.size = !!size ? size : 10;
this.options.total = !!total ? total : 0;//
this.pageT = Math.ceil(this.options.total / this.options.size);
this.init();
this.page_nation = null;
};
proto.init = function () {
var self = this;
var pageNum = function (page) {//创建分页器
return (function () {
let ol = document.createElement("ol");
ol.classList.add("page-ol");
let p = !!page ? page : 1;
let tPage = Math.ceil(self.options.total / self.options.size);
let s = p <= 3 ? 1 : p > (tPage - 3) ? tPage - 4 : p - 2;
s=s==0?1:s;
for (let i = s; i < (s + 5); i++) {
if (i > tPage) {
break;
}
let li = document.createElement("li");
li.innerText = i;
if (i == p) {
li.classList.add("hover");
}
ol.appendChild(li);
}
return ol;
})(page);
};
var sizeNum = function (size) {//重置size
return (function () {
let select = document.createElement("select");
select.setAttribute("class", "page-Select");
let s = !!size ? size : 10;
//let tPage=Math.ceil(self.options.total/self.options.size);
for (let i = 5; i <= (5 * 4); i += 5) {
let option = document.createElement("option");
option.value = i;
option.innerText = i;
if (i === self.options.size) {
option.setAttribute("selected", "selected");
}
select.appendChild(option);
}
return select;
})(size);
};
var prevBtn = function () {//上一页按钮
return (function () {
let button = document.createElement("span");
button.setAttribute("class", "prev-btn");
button.innerText = "上一页";
if (self.options.page == 1) {
button.classList.add("disabled")
};
return button;
})();
};
var nextBtn = function () {//下一页按钮
return (function () {
let button = document.createElement("span");
button.setAttribute("class", "next-btn");
button.innerText = "下一页";
if (self.options.page == self.pageT) {
button.classList.add("disabled")
}
;
return button;
})();
};
var pageMark = function () {//页码标识
return (function () {
let span = document.createElement("span");
span.setAttribute("class", "pageMark");
span.innerHTML = "<strong>" + self.options.page + "</strong> / <strong>" + Math.ceil(self.options.total / self.options.size) + "</strong>";
return span;
})();
};
var enterBtn = function () {//跳转按钮
return (function () {
let button = document.createElement("span");
button.setAttribute("class", "enter-btn");
let ipt = document.createElement("input");
ipt.value = self.options.page;
ipt.setAttribute("type", "text");
let b = document.createElement("span");
b.setAttribute("class", "enterBtn");
b.innerText = "跳转";
button.appendChild(ipt);
button.appendChild(b);
return button;
})();
};
let page_nation = self.options.el.querySelector(".page-nation");
if (page_nation != null && page_nation != "undefind") {
page_nation.innerHTML = "";
}
else {
page_nation = document.createElement("div");
page_nation.classList.add("page-nation");
self.options.el.appendChild(page_nation);
}
page_nation.appendChild(new pageNum(self.options.page));
self.options.IsShowBtn.choosePageSize&&page_nation.appendChild(new sizeNum(self.options.size));
self.options.IsShowBtn.IsShowPrevOrNextBtn&&page_nation.appendChild(new prevBtn());
self.options.IsShowBtn.IsShowPrevOrNextBtn&&page_nation.appendChild(new nextBtn());
page_nation.appendChild(new pageMark());
self.options.IsShowBtn.IsShowEnterBtn&&page_nation.appendChild(new enterBtn());
self.page_nation = document.querySelector(".page-nation");
this.switchPage(self.options.callback);
this.switchSize(self.options.callback);
return self;
};
proto.pageStyle = function () {
let headDoc = document.querySelector("head");
var linkTag = document.createElement("link");
var cssURL = this.options.styUrl;
linkTag.id = 'dynamic-style';
linkTag.href = cssURL;
linkTag.setAttribute('rel', 'stylesheet');
linkTag.setAttribute('media', 'all');
linkTag.setAttribute('type', 'text/css');
headDoc.appendChild(linkTag);
};
proto.switchPage = function (fun) {
let self = this;
let lis = this.page_nation.children[0].children;
for (let i = 0, len = lis.length; i < len; i++) {
lis[i].onclick = function () {
self.options.page = this.innerText;
self.rander(self.options.page, self.options.size, self.options.total);
};
}
this.options.el.querySelectorAll(".prev-btn")[0].onclick = function (e) {
//console.time("rr");
self.options.page = --self.options.page;
self.rander(self.options.page, self.options.size, self.options.total);
//console.timeEnd("rr");
};
this.options.el.querySelectorAll(".next-btn")[0].onclick = function (e) {
self.options.page = ++self.options.page;
self.rander(self.options.page, self.options.size, self.options.total);
};
this.options.el.querySelectorAll(".enterBtn")[0].onclick = function (e) {
let val = this.previousElementSibling.value;
if (!val || val > self.pageT || val < 1) {
alert("参数超出范围！");
return false;
} else {
self.options.page = val;
self.rander(self.options.page, self.options.size, self.options.total);
}
};
fun(self.options.page, self.options.size, self.options.total);
};
proto.switchSize = function (fun) {
let self = this;
let lis = this.page_nation.children[1];
lis.onchange = function () {
self.options.size = Number(this.value);
self.rander(1, self.options.size, self.options.total);
fun(1, self.options.size, self.options.total);
}
};
return pageNation;
})();
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持猪先飞。
上一篇: 原生js实现购物车功能
下一篇: 原生js实现购物车
相关文章
- 我们这里介绍php与KindEditor编辑器使用时如何利用KindEditor编辑器的分页功能实现文章内容分页，KindEditor编辑器在我们点击分页时会插入代码，我们只要以它为分切符，就...2016-11-25
- 最近接了一个项目，其中有需求要用到jquery分页控件，上网也找到了需要分页控件，各种写法各种用法，都是很复杂，最终决定自己动手写一个jquery分页控件，全当是练练手了。写的不好，还请见谅，本分页控件在chrome测试过，其他的兼容性...2015-10-30
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15
- 本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考，具体如下：这里介绍的jquery伪分页效果，在火狐下表现完美，IE全系列下有些问题，引入了jQuery1.7.2插件，代码里有丰富的注释，相信对学习jQuery有不小的帮助，期...2015-10-30
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-06
- 作为前端，一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手，前端能做的太少。而且由于源码的暴露，攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的，本文的许多方法，用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要为大家详细介绍了js实现列表按字母排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-08-11
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码，有需要的小伙伴可以参考下。...2016-01-20
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办，不知道具体解决办法的下面跟小编一起来看看。 因项目需要，需要Node.js与PHP做接口调用，发现nod...2017-07-06
- 系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解，感兴趣的朋友一起学习吧...2015-12-29
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下...2016-05-09
- 为了网站的安全性，很多朋友都把密码设的比较复杂，但是如何密码不能明显示，不知道输的是对是错，为了安全起见可以把密码显示的，那么基于js代码如何实现的呢？下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示，需要的朋友参考下...2016-03-03