网站建设礼品,海阳网网站,更改wordpress登录地址,腾讯视频网站建设维护用原生js封装一个分页器
起因#xff1a;这次项目还是用原生的js来写的#xff0c;我负责的是后台#xff0c;分页是后台最常见的一个功能了#xff0c;于是干脆封装一下,废话少说#xff0c;直接上代码
这里是基本的样式
.pagination {display: flex;width: 600px;hei…用原生js封装一个分页器
起因这次项目还是用原生的js来写的我负责的是后台分页是后台最常见的一个功能了于是干脆封装一下,废话少说直接上代码
这里是基本的样式
.pagination {display: flex;width: 600px;height: 35px;margin: 0 auto;margin-left: 275px;/* border: 1px solid red; */
}.pagination span a {box-sizing: border-box;text-decoration: none;color: black;
}.pagination span {/* border: 1px solid red; */text-align: center;width: 40px;height: 35px;line-height: 35px;margin: 0px 2px;
}.pagination span i {font-size: 10px;font-weight: 100;
}.pagination span img {width: 30px;height: 25px;
}.pagination .pageStyle a {display: block;text-align: center;width: 40px;height: 35px;line-height: 35px;/* background-color: bisque; */border: 1px solid #ccc;border-radius: 5px;
}.pagination .pageStyle a:hover {border: 1px solid rgb(27, 129, 121);
}.pagination .active {background-color: cadetblue;
}
这个是在js里面定义的一个分页器类
class PageClass { //定义一个分页器类 constructor(ele, pageNum, page, cb) { //需要传入4个参数第一个容器元素第二个页面总数第三个当前页面数第四个为回调函数this.ele ele; //定义属性this.pageNum pageNum;this.page page;this.cb cb;this.renderPage(); //执行渲染的方法this.operate(); //给实例化对象绑定各种操作的方法}renderPage() { //在类的原型上定义一个渲染的方法let str ;if (this.pageNum 5) { //判断当前分页的页面总数是否超过5页if (this.page 4) { //如果页面总数大于5 再判断当前页是否小于或者等于第四页for (let i 0; i 5; i) { //如果当前页是小于等于4以内的页数 遍历1到5if ((i 1) this.page) { //判断当前页是否等于 当前 索引值索引值从0开始 1str span classpageStyle myPage${i 1}a hrefjavascript:; classactive${i 1}/a/span;//等于的话说明渲染的是当前页给当前页一个active的类名进行渲染} else { //如果渲染的不是当前页str span classpageStyle myPage${i 1}a hrefjavascript:;${i 1}/a/span;//普通渲染就行了}}str spani•••/i/spanspan classpageStyle myPage${this.pageNum}a hrefjavascript:;${this.pageNum}/a/span;//最后渲染一个最末尾页} else if (this.page 4 this.page this.pageNum - 3) { //判断当前页是否大于第四页且小于最大页数减去 3 str span classpageStyle myPage1a hrefjavascript:;1/a/spanspani•••/i/span; //渲染一个首页for (let i this.page - 3; i this.page 2; i) {if ((i 1) this.page) { //判断当前正在渲染的是否为当前页str span classpageStyle myPage${i 1}a hrefjavascript:; classactive${i 1}/a/span;//如果是当前页给一个active类名进行渲染} else {str span classpageStyle myPage${i 1}a hrefjavascript:;${i 1}/a/span;//如果不是普通渲染就行}}str spani•••/i/spanspan classpageStyle myPage${this.pageNum}a hrefjavascript:;${this.pageNum}/a/span;//渲染一个尾页} else if (this.page this.pageNum - 3) {//如果当前页数大于或者等于最大页数 - 3 str span classpageStyle myPage1a hrefjavascript:;1/a/spanspani•••/i/span; //渲染一个首页for (let i this.pageNum - 5; i this.pageNum; i) {//从倒数第5页开始渲染if ((i 1) this.page) { //如果渲染的是当前页str span classpageStyle myPage${i 1}a hrefjavascript:; classactive${i 1}/a/span;//增加一个active类名进行渲染} else {str span classpageStyle myPage${i 1}a hrefjavascript:;${i 1}/a/span;//否则普通渲染}}}} else { //如果最大页数小于等于5for (let i 0; i this.pageNum; i) { //直接渲染到当前最大页数if ((i 1) this.page) { //判断渲染的是否为当前页数str span classpageStyle myPage${i 1}a hrefjavascript:; classactive${i 1}/a/span;//如果是增加一个active类名进行渲染} else {str span classpageStyle myPage${i 1}a hrefjavascript:;${i 1}/a/span;//否则普通渲染就行了}}}//将所有内容渲染到容器盒子里//第一页//上一页//中间页面//下一页//最后一页this.ele.innerHTML span classfirsta hrefjavascript:; img src/public/img/index.png alt/a/spanspan classpreva hrefjavascript:;img src/public/img/before.png alt/a/span${str}span classnexta hrefjavascript:;img src/public/img/after.png alt/a/spanspan classlasta hrefjavascript:;img src/public/img/end.png alt/a/span ;}operate() { //在类原型上定义一个operate的方法给这个类绑定点击事件const _that this; //申明一个常量接收thislet firstEle this.ele.querySelector(.first); //获取第一页的元素let lastEle this.ele.querySelector(.last); //获取最后一页的元素let nextEle this.ele.querySelector(.next); //获取下一页的元素let prevEle this.ele.querySelector(.prev); //获取上一页的元素let pageStyleEles this.ele.querySelectorAll(.pageStyle); //获取所有的中间页面的元素firstEle.onclick function () { //当点击第一页时_that.page 1; //让page属性重新赋值为1_that.cb(_that.page); //并将page属性通过回调函数cb传递出去}lastEle.onclick function () { //当点击最后一页时_that.page _that.pageNum; //让page属性重新赋值为页面最大值_that.cb(_that.page); //并将page属性通过回调函数cb传递出去}nextEle.onclick function () { //当点击下一页时if (_that.page _that.pageNum) { //先判断当前页是否小于最大页_that.page _that.page 1; //如果没有超过给page属性自增1_that.cb(_that.page); //并将page属性通过回调函数cb传递出去}}prevEle.onclick function () { //当点击上一页时if (_that.page 1) { //先判断当前页是否大于第一页_that.page _that.page - 1; //如果是大于第一页的话page属性自减1_that.cb(_that.page); //并将page属性通过回调函数cb传递出去}}pageStyleEles.forEach(function (pageStyleEle) { //遍历获取到中间页面的所有元素pageStyleEle.onclick function () { //当点击其中一页时_that.page parseInt(this.getAttribute(myPage)); //获取这个元素自定义属性myPage属性值是当前页 并将当前页赋值给page属性_that.cb(_that.page); //将page属性通过回调函数cb传递出去}});}}
在html页面中
只需要防止这样的一个盒子就行了 div classpagination /div
使用的时候js里面这样写
let pageEle document.querySelector(.pagination); //获取页面渲染的容器
ready(1); //调用渲染容器的方法传递初始页面为1
function ready(page) { // 定义一个方法用来渲染容器new PageClass(pageEle, 1000, page, function (page) { //new 一个PageClass类传递容器元素总页面数当前页面以及回调函数console.log(page, 看看点击Page的时候页面是否会发生变化);ready(page); //回调函数调用渲染容器的方法getAllUsers(10, page);//这个是自定义的页面变化的时候获取页面数据的渲染表格的方法});
}
整个跑起来大致就是这个样子 至于显示的这个回到首页上一页下一页回到最后一页的图片可以去阿里妈妈图标库去看看挑选自己喜欢的。分享到这里就结束了
学技术的话看到这里就行。 我是分割线 个人的小感悟
很多人可能会选择在过年或者是期末的时候进行总结那为什么会选择现在进行来一波回忆杀呢
因为距离我去年将要加入未来软件工作室就不到4天的时间了。 对我来说这一年的成长也许技术也许是次要的心理的成长占了绝大部分。 去年的这个时候来大学快一个月的时间了对学校的基本情况了解的差不多了知道了未来是学校最强的小组一股劲儿的想要来到这里找到了当时小组大三的学姐然后学姐把我拉进了未来软件工作室的招新群等待工作室正式开始招新投简历然后面试分到未来五组当中融入新的团体.......这就是梦的开始也是很多事情的开始若要究其根本命运的齿轮究竟是从什么时候开始转动的 ? 可能是偷偷改志愿学计算机可能是报考之后在贴吧四处找寻学校信息从此多了一位师父照拂可能是在知乎找到了熟知学校信息的计算机学姐从此多了一位领路人一切的一切把大学的画卷铺开在我面前......
去年这一年
有难关面前能成为家人依靠的成就感
有熬夜到凌晨34点连续3天睡眠时间不超过10个小时但依然活力满满的冲劲儿
有趁着水课多连着整整睡了45天的疲惫
有被一次一次的抛弃再一次一次的振作
有用自己学到的东西解决问题时候的喜悦
更有无数个加一个瞬间把自己从堕落中拉出来
专研自己的热爱
从书中寻找共鸣
去西安看看那富贵迷人眼
看那没被污染前的海
......
一些事情到此完成闭环。
我看到的我感受的
回忆太多可是经历过的千千万都抵不过当下这一瞬间的永恒。
