js封装分页[page]插件（js封装工具）
更新时间：2020-08-27 04:09:50 来源： 阅读量：
【摘要】 js封装分页[page]插件（js封装工具）考必过小编为大家整理了关于js封装分页[page]插件（js封装工具）的信息，希望可以帮助到大家！
js封装分页[page]插件（js封装工具）
标签：开始lastset信息event用户页码oncpckput
function Page(classname,options={}){
// 根据传进来的类名获取大盒子
this.box = document.querySelector("."+classname);
// 定义默认的参数
this.defapt = {
language:{ // 因为用户可以不传，所以需要定义默认值
first:"首页",
prev:"上一页",
pst:npl,
next:"下一页",
last:"尾页"
},
pageInfo:{ // 因为用户可以不传，所以需要定义默认值
total:100,
pageSize:10
},
showData:function(){}
}
// 定义当前页
this.currentPage = 1;
// 定义放页码的盒子
this.pst = npl;
// 参数替换
// 替换语言
for(var attr in options.language){
this.defapt.language[attr] = options.language[attr];
}
// 替换页码信息
for(var attr in options.pageInfo){
this.defapt.pageInfo[attr] = options.pageInfo[attr];
}
// 定义总页数
this.totalPage = Math.ceil(this.defapt.pageInfo.total/this.defapt.pageInfo.pageSize)
// 以后在使用这些数据的时候，使用defapt
// 创建标签 - 通过语言
for(var attr in this.defapt.language){
var p = document.createElement("p");
p.className = attr;
p.innerText = this.defapt.language[attr];
this.box.appendChild(p)
// 加样式是除了pst都加
if(attr != ‘pst‘){
setStyle(p,{
float:"left",
padding:"5px",
margin:"5px",
border:"1px sopd #000"
});
}else{
this.pst = p;
}
}
// 创建页码
/*
页码有3种情况：
1.前2页
2.最后2页
3.中间的页码
条件：需要知道当前是第几页 - 一打开就是第一页 - 定义当前页，作为对象的属性
*/
// 处理showData的可选性
if(options.showData){
this.defapt.showData = options.showData
}
// console.log(this.defapt);
this.createPageNum();
this.setDisabled()
this.defapt.showData(this.currentPage)
// 应该给这些标签添加点击事件，让整个分页动起来，事件挺多 - 事件委托
this.box.oncpck = (e)=>{
// 通过事件对象，获取目标元素
var e = e || window.event;
var target = e.target || e.srcElement;
// 判断是哪个标签，每个标签的功能是不一样的
if(target.className == "first" && target.getAttribute("disabled")!="true"){ // 点击了首页
// 将当前页设置为1
this.currentPage = 1;
this.setDisabled()
this.pst.innerHTML = ‘‘;
this.createPageNum();
this.defapt.showData(this.currentPage)
}else if(target.className == "prev" && target.getAttribute("disabled")!="true"){ // 点击了上一页
this.currentPage-- // 当前页-1
// 在第1页点击会出问题
if(this.currentPage<=1){
this.currentPage = 1;
}
this.setDisabled()
this.pst.innerHTML = ‘‘;
this.createPageNum();
this.defapt.showData(this.currentPage)
}else if(target.className == ‘next‘ && target.getAttribute("disabled")!="true"){ // 点击了下一页
// 让当前页+1
this.currentPage++
if(this.currentPage>=this.totalPage){
this.currentPage=this.totalPage
}
this.setDisabled()
this.pst.innerHTML = ‘‘;
this.createPageNum();
this.defapt.showData(this.currentPage)
}else if(target.className == ‘last‘ && target.getAttribute("disabled")!="true"){ // 点击了尾页
// 让当前页=最后一页
this.currentPage=this.totalPage
this.setDisabled()
this.pst.innerHTML = ‘‘;
this.createPageNum();
this.defapt.showData(this.currentPage)
}else if(target.nodeName == ‘P‘ && target.innerText-0 != this.currentPage){ // 点击了页码
// 将当前页设置为这个页码标签中的内容
// 获取页码标签中的内容
var num = target.innerText;
this.currentPage = num-0;
this.setDisabled()
this.pst.innerHTML = ‘‘;
this.createPageNum();
this.defapt.showData(this.currentPage)
}else if(target.nodeName === "BUTTON"){
// 获取输入的页码
var num = target.previousElementSibpng.value-0;
if(num<1 || num>this.totalPage){
alert("请输入合法的页码数字");
return false;
}
// 将当前页设置为这个页码
this.currentPage = num;
this.setDisabled()
this.pst.innerHTML = ‘‘;
this.createPageNum();
this.defapt.showData(this.currentPage)
}
}
var input = document.createElement("input");
input.setAttribute("type","number")
this.box.appendChild(input)
setStyle(input,{
outpne:"none",
border:"none",
padding:"8px",
border:"1px sopd #000",
margin:"5px",
width:"50px"
})
var btn = document.createElement("button");
btn.innerText = ‘GO‘;
this.box.appendChild(btn)
setStyle(btn,{
outpne:"none",
border:"none",
padding:"8px",
border:"1px sopd #000",
margin:"5px",
})
var p = document.createElement("span");
p.innerText = `共${this.totalPage}页，当前第${this.currentPage}页`;
this.box.appendChild(p);
}
// 设置禁用项
Page.prototype.setDisabled = function(){
if(this.currentPage==1){
this.box.children[0].setAttribute("disabled",true)
this.box.children[0].style.backgroundColor = ‘#ccc‘;
this.box.children[1].setAttribute("disabled",true)
this.box.children[1].style.backgroundColor = ‘#ccc‘;
}else{
this.box.children[0].setAttribute("disabled",false)
this.box.children[1].style.backgroundColor = this.box.children[0].style.backgroundColor = ‘#fff‘;
this.box.children[1].setAttribute("disabled",false)
}
if(this.currentPage == this.totalPage){
this.box.children[3].setAttribute("disabled",true)
this.box.children[3].style.backgroundColor = ‘#ccc‘;
this.box.children[4].setAttribute("disabled",true)
this.box.children[4].style.backgroundColor = ‘#ccc‘;
}else{
this.box.children[3].setAttribute("disabled",false)
this.box.children[4].style.backgroundColor = this.box.children[3].style.backgroundColor = ‘#fff‘;
this.box.children[4].setAttribute("disabled",false)
}
}
// 创建页码标签的
Page.prototype.createPageNum = function(){
if(this.totalPage>=5){
if(this.currentPage<3){ // 前2页
for(var i=1;i<=5;i++){ // 创建1~5的页码
var p = document.createElement("p");
p.innerText = i;
// 将p标签放到放页码的pst里面 - 获取pst - 将pst作为自己的属性
this.pst.appendChild(p)
// 给p标签加样式
setStyle(p,{
float:"left",
padding:"5px",
margin:"5px",
border:"1px sopd #000"
})
if(this.currentPage == i){
p.style.backgroundColor = ‘#ff0036‘;
}
}
}else if(this.currentPage > this.totalPage-2){ // 判断当前页是否大于总也是-2，发现没有总页数
for(var i=this.totalPage-4;i<=this.totalPage;i++){ // 循环总页数-4开始，到总页数结束
var p = document.createElement("p");
p.innerText = i;
// 将p标签放到放页码的pst里面 - 获取pst - 将pst作为自己的属性
this.pst.appendChild(p)
// 给p标签加样式
setStyle(p,{
float:"left",
padding:"5px",
margin:"5px",
border:"1px sopd #000"
})
if(this.currentPage == i){
p.style.backgroundColor = ‘#ff0036‘;
}
}
}else{
for(var i=this.currentPage-2;i<=this.currentPage+2;i++){ // 中间页是 当前页-2开始到当前页+2结束
var p = document.createElement("p");
p.innerText = i;
// 将p标签放到放页码的pst里面 - 获取pst - 将pst作为自己的属性
this.pst.appendChild(p)
// 给p标签加样式
setStyle(p,{
float:"left",
padding:"5px",
margin:"5px",
border:"1px sopd #000"
})
if(this.currentPage == i){
p.style.backgroundColor = ‘#ff0036‘;
}
}
}
}else{ // 总页数小于5的情况
for(var i=1;i<=this.totalPage;i++){ // 展示1~总页数
var p = document.createElement("p");
p.innerText = i;
// 将p标签放到放页码的pst里面 - 获取pst - 将pst作为自己的属性
this.pst.appendChild(p)
// 给p标签加样式
setStyle(p,{
float:"left",
padding:"5px",
margin:"5px",
border:"1px sopd #000"
})
if(this.currentPage == i){
p.style.backgroundColor = ‘#ff0036‘;
}
}
}
}
function setStyle(ele,styleObj){
for(var attr in styleObj){
ele["style"][attr] = styleObj[attr];
}
}
js封装分页[page]插件（js封装工具）
标签：开始lastset信息event用户页码oncpckput
以上就是js封装分页[page]插件（js封装工具）的内容，更多资讯请及时关注考必过网站，最新消息小编会第一时间发布，大家考试加油！