标签：清空 封装 字段 query 过多 跳转 point == none
<style> * { margin: 0px; padding: 0px; list-style: none; } .page { height: 40px; overflow: hidden; margin-top: 10px; } .page .page-content { height: 40px; float: left; margin-left: 10px; } .page .page-content li { width: 40px; height: 40px; background: #666; color: black; text-align: center; line-height: 40px; float: left; margin-left: 5px; cursor: pointer; } .page .page-content li.checked { background: orange; color: red; } .page span { width: 50px; height: 40px; background: skyblue; color: orange; text-align: center; line-height: 40px; float: left; margin-left: 10px; cursor: pointer; } .page span.checked { background: #999; color: #666; } </style> </head> <body> <div id="page" class="page"> </div>
<script>
// 第一步:构建一个构造函数,携带一个json对象的参数,json指的是大括号里的内容
function Page(json) {
this.option = {
count: 100,//总数据
pagenum: 10,//每页显示的数据数量
pageindex: 5//每页显示的页码数量
}
Object.assign(this.option, json.data);
this.callback = json.callback;
// this.target指向的dom元素，获取元素
this.target = document.querySelector(json.el);
// 第三步，根据option里的数据动态生成ul里的li，option里的数据到时候是动态请求的
this.showpageindex = 1;//显示的页面用checked的class属性
// 第二步:获取dom元素后，虚拟dom,生成页面,用封装函数来生成调用
this.creat();
this.creatdata();
// this.clickevent();
}
Page.prototype.clickevent = function () {
this.prev.className = ‘checked‘;
this.next.className = ‘checked‘;
this.prev.onclick = "";
this.next.onclick = "";
// 这里两层函数，需要注意的是this指针指向问题
if (this.showpageindex != 1) {
this.prev.onclick = () => {
this.showpageindex--;
this.creatdata();
}
this.prev.className = "";
}
if (this.showpageindex != this.maxShowNum) {
this.next.onclick = () => {
this.showpageindex++;
this.creatdata();
}
this.next.className = "";
//可以做到切换页面，但会生成重复的dom元素
}
}
Page.prototype.creatdata = function () {
var middle = Math.floor(this.option.pageindex / 2);//向下取整
var start = 1;
var maxShowNum = Math.ceil(this.option.count / this.option.pagenum);//最大页数
this.maxShowNum = maxShowNum;
var end = this.option.pageindex;
end = end > maxShowNum ? maxShowNum : end;//判断自定义的end数，与数据之间生成的最大页数相比关系，避免页码过多
this.content.innerHTML = "";//这一步操作指向的是clickevent函数的bug问题，生成li之前，先清空li
if (this.showpageindex > middle) {//如果带class的页码大于中间值之后，因为页码是奇数，就是+-中间值就行
start = this.showpageindex - middle;
end = this.showpageindex + middle;
}
if (this.showpageindex > (maxShowNum - middle)) {
start = maxShowNum - this.option.pageindex + 1;
end = maxShowNum;
}
if (start <= 1) {
start = 1
}
var that = this;
for (var i = start; i <= end; i++) {
var li = document.createElement(‘li‘);
li.innerHTML = i;
if (i == this.showpageindex) {
li.className = ‘checked‘;
}
this.content.appendChild(li);
li.onclick = function () {
that.showpageindex = this.innerHTML * 1;
that.creatdata();
}
}
this.clickevent();
this.callback(this.showpageindex);
}
// 对应的是第二步的封装函数
Page.prototype.creat = function () {
// 创造元素并加入到页面中
this.prev = document.createElement(‘span‘);
this.prev.className = ‘page-prev‘;
this.prev.innerHTML = ‘上一页‘;
this.target.appendChild(this.prev)//写入，appendChild用法
this.content = document.createElement(‘ul‘);
this.content.className = ‘page-content‘;
this.target.appendChild(this.content);
this.next = document.createElement(‘span‘);
this.next.className = ‘page-next‘;
this.next.innerHTML = ‘下一页‘;
this.target.appendChild(this.next);
}
new Page({
el: "#page",
data: {
count: 200,
pagenum: 10,
pageindex: 7
},
callback: function (showpageindex) {
console.log(showpageindex)
}
})
这里的话，采用的是原生js写的一个分页插件，分享在博客里吧！主要是锻炼编程思维，下面也分享下自己的思路吧
标签：清空 封装 字段 query 过多 跳转 point == none
原文地址：https://www.cnblogs.com/icon-JIA/p/13166224.html
