<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>
html和css部分，较为常见，常规样式，重点在js部分。
<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写的一个分页插件，分享在博客里吧！主要是锻炼编程思维，下面也分享下自己的思路吧
// 分页插件的简单思路,较潦草,可能只有自己可以看懂,
// 第一步：写一个构造函数，定义要绑定的相关dom元素
// 第二步：在创建虚拟dom，写一个封装函数，来实现原本分页的静态页面再次实现
// 第三步：模拟创建一个数据对象，有总数据，每页显示数据，显示的页码数量，来动态生成每一个页码
// 第四步：在封装动态生成函数进行一个循环赋值页码中的数值
// 第五步: 封装点击事件相关函数,上一页和下一页,点击时让显示的页码数据++,或者--,同时让数据主体每次生成时为空,避免重复生成页码数
// 第六步: 同时需要注意,点击时.调用数据生成函数,在显示页码为1时,上一页不可点击,为最大页面时,下一页不可点击
// 第七步: 数据生成时,因为显示的是奇数,所以前后页码数相同,在显示的页码数大于中间值后,进行if判断，一个简单的
算法问题
// 第八步: 点击页码时,也可以跳转,在生成li时,写li的点击函数,在内部再次调用数据生成函数,
递归
//
参数分离,用Object.assign方法,更新数据
//
回调函数,绑定li是带参数显示的页码数,中间有很多细节,
this指针问题就要多注意
其实写完还是有点累的，但效果还是挺不错的，思路大致在这里的，标红字段是代码中需要注意的地方，也是写难点，可能有些潦草，多担待呀！