原生js實(shí)現(xiàn)分頁(yè)效果
更新時(shí)間：2020年09月23日 15:35:48 作者：zyfacd
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)分頁(yè)效果的具體代碼，供大家參考，具體內(nèi)容如下
效果如下：
代碼：
<!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>
//分頁(yè)調(diào)用方法
const Api=new pageNation({
el:"#page-nation",//分頁(yè)器位置
page:1,//當(dāng)前頁(yè)
size:5,//默認(rèn)5,10,15,20
total:100,//數(shù)據(jù)總條數(shù)
styUrl:
'./page.css',//樣式地址（可修改）
IsShowBtn: {//設(shè)置需要顯示的按鈕
choosePageSize: true,//是否顯示下拉選項(xiàng)
IsShowPrevOrNextBtn: true,//是否顯示上一頁(yè)下一頁(yè)按鈕
IsShowEnterBtn: true,//是否顯示跳轉(zhuǎn)輸入
IsShowTotalPage:true,//是否顯示總頁(yè)數(shù)
},
callback:function(page,size,total){
console.log(page,size,total);
//此處為ajax請(qǐng)求
}
});
</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",//分頁(yè)父容器
page: 1,
size: 10,
total: 0,
styUrl: 'style.css',
callback: null,
IsShowBtn: {//設(shè)置需要顯示的按鈕
choosePageSize: true,//是否顯示下拉選項(xiàng)
IsShowPrevOrNextBtn: true,//否顯示上一頁(yè)下一頁(yè)按鈕
IsShowEnterBtn: true,//是否顯示跳轉(zhuǎn)輸入
IsShowTotalPage:true,//是否顯示總頁(yè)數(shù)
}
};
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) {//創(chuàng)建分頁(yè)器
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 () {//上一頁(yè)按鈕
return (function () {
let button = document.createElement("span");
button.setAttribute("class", "prev-btn");
button.innerText = "上一頁(yè)";
if (self.options.page == 1) {
button.classList.add("disabled")
};
return button;
})();
};
var nextBtn = function () {//下一頁(yè)按鈕
return (function () {
let button = document.createElement("span");
button.setAttribute("class", "next-btn");
button.innerText = "下一頁(yè)";
if (self.options.page == self.pageT) {
button.classList.add("disabled")
}
;
return button;
})();
};
var pageMark = function () {//頁(yè)碼標(biāo)識(shí)
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 () {//跳轉(zhuǎn)按鈕
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 = "跳轉(zhuǎn)";
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("參數(shù)超出范圍！");
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;
})();
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js調(diào)用打印機(jī)打印網(wǎng)頁(yè)字體總是縮小一號(hào)的解決方法
直接調(diào)用window.print()，但是打印出來(lái)后，字體總是縮小一號(hào),后來(lái)直接target="_blank"，就可以正常打印了，下面是實(shí)現(xiàn)代碼2014-01-01
微信企業(yè)號(hào)開(kāi)發(fā)之微信考勤百度地圖定位
本文給大家介紹微信企業(yè)號(hào)開(kāi)發(fā)之微信考勤百度地圖定位，有需要的朋友參考下本篇文章2015-09-09
JavaScript中join()、splice()、slice()和split()函數(shù)用法示例
這篇文章主要介紹了JavaScript中join()、splice()、slice()和split()函數(shù)用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了join()、splice()、slice()和split()函數(shù)的功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-08-08
現(xiàn)在有這樣一個(gè)問(wèn)題,由于一些原因,我們經(jīng)常需要修改gTool的代碼然后上傳更新cdn,但是用戶通過(guò) html 文件訪問(wèn)的 gTool 鏈接實(shí)際上還是緩存的,所以現(xiàn)在問(wèn)題就是如何禁止緩存,文中給大家介紹了三個(gè)方法供大家參考,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了JavaScript如何操作css，幫助大家更好的進(jìn)行前端開(kāi)發(fā)，優(yōu)化網(wǎng)頁(yè)，感興趣的朋友可以了解下2020-10-10
簡(jiǎn)單的加密css地址防止別人下載你的CSS文件的方法
阻止別人不那么容易下載或查看到你的CSS文件,高手可能阻止不了,不過(guò)新手們一時(shí)會(huì)不知所措,費(fèi)一番周折了2009-10-10
頁(yè)面跳轉(zhuǎn)是經(jīng)常需要用到的，本文主要介紹了淺談uniapp頁(yè)面跳轉(zhuǎn)的解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
本實(shí)例使用Javascript實(shí)現(xiàn)在textarea光標(biāo)處插入文本,支持多種瀏覽器2013-03-03
小編遇到的問(wèn)題是在彈出層后面的 遮罩層，因?yàn)橛袧L動(dòng)條，導(dǎo)致滾動(dòng)條下面不可視區(qū)域沒(méi)有遮罩層。下面就為大家介紹一下解決方法2016-04-04
純js寫(xiě)的分頁(yè)代碼且簡(jiǎn)潔實(shí)用哦！需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11