原生JS实现分页


Posted in Javascript onApril 19, 2022

这个只是一个分页的demo,主要是思路整理(很久之前项目用的东西)

分页实现的效果 主要是 左侧上一页 右侧是下一页 中间显示主要是超过5个显示 省略号 然后是可配置选项

实现之后的效果

原生JS实现分页

首先需要初始化该对象的一些基本属性,显示总页码数,中间显示的页面数, 添加一个回调函数,在页面变化激活回调函数并返回当前页面和一些需要的其他参数 init为对象初始化的方法(里面的参数都是可以写成活的,我这里偷懒了所以写成死的了) 这个里的 z_page 可以接是接口返回的总页数

function Page(obj) {
     this.obj = obj||{page:1,page_count: 0};
     this.z_page = 7;    // 一共显示的页码数
     this.show_page = this.z_page-2; // 中间显示多少个页码  必须是个基数好看
     this.fn = this.obj.block;
     this.init()
 }

在init在初始化方法里主要是判断

1 总页数是否小于显示页面(这个主要是判断是否显示省略号,添加省略号比较麻烦,这个是总页数少不用添加)

2 当前页面数+左右显示的平均数(show_page/2-1)+1和总页面相比 这个主要判断省略号在前面的问题(靠近尾页)前面有省略号

原生JS实现分页

3 左右显示的平均数(show_page/2-1)+2(最前面1 和最后的书)大于当前页面数(靠近首页)

第一个图片(后面有省略号)

4 剩下的状态就是中间状态(两侧有省略号)

原生JS实现分页

这个判断其实也是要判断咱们分页的边界条件,如果这个想好了并且实现了 相当于就完成了一半 初始化方法的最后是要给上一页和下一页,有数字的页签 添加点击事件 并且做相应逻辑处理 代码的实现

Page.prototype.create = function () {
     // page:1 page_count 17
     // 保证被点击的页数在中间
     var ping = (this.show_page-1)/2; // 左右显示的平均数  在中间
     var num = this.obj.page-ping; // 最小页码
     var endnum =  (this.obj.page+ping)>this.obj.page_count?this.obj.page_count:(this.obj.page+ping) // 最大页码
     console.log(endnum);
     var pageID = document.getElementById('pageID');
     var self= this;
     pageID.innerHTML = '';
     num = num<1?1:num;
     if (this.obj.page_count<= this.z_page) {
         alert('smallPage');
         this.smallPage()
     } else if( (this.obj.page+ping+1)>=this.obj.page_count) {// 还要加上最后一个   接近尾页
         pageID.appendChild(this.nearBack())
         console.log('尾巴')

     } else if ((ping+2)>=(this.obj.page)) {  //3   接近首页
         pageID.appendChild( this.nearHome())
         console.log('临近首页')
     }else {
         console.log(num,endnum);
         pageID.appendChild(this.centerPage(num,endnum));
     }
     document.onclick = function (event) {
         switch (event.target.className) {
             case 'previous':
                 self._previous();
                 break;
             case 'next':
                 self._next();
                 break;
             default:
                 self.clickLi(event.target);
         }
         self.fn(self.obj.page)
     }
 };

剩下的就是只想逻辑和dom操作了 因为是用的原生js,这里是用的文档碎片,把我生成的dom全部都放到文档碎片里,然后一次性返出来 直接append到body上 这个是我的方法代码

Page.prototype.nearBack = function () {
     var oFragmeng = document.createDocumentFragment(); // 创建了一个文档碎片
     var ul = document.createElement('ul')
     var Div = oFragmeng.appendChild(ul);
      Div.innerHTML = '<li>1</li><li>....</li>';
     for (var m=(this.obj.page_count- this.show_page);m<=this.obj.page_count;m++) {
         var li1 = document.createElement('li');
         li1.innerHTML = m;
         if (m===this.obj.page) {
             li1.className = 'active'
         }
         Div.appendChild(li1)
     }
    return oFragmeng.firstChild;
 };

总结:分页 也会和你实现的分页效果不同,实现方式也有区别,但是核心思想是一样的。 

到此这篇关于基于原生JS实现分页效果的示例代码的文章就介绍到这了!

Javascript 相关文章推荐
jquery插件开发方法(初学者)
Feb 03 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
Mar 09 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
使用pkg打包ThinkJS项目的方法步骤
Dec 30 Javascript
js实现简单进度条效果
Mar 25 Javascript
Javascript webpack动态import
微信小程序APP页面的之间的相互传递参数以及自定义组件
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
微信小程序APP的生命周期及页面的生命周期
解决vue中provide inject的响应式监听
Apr 19 #Vue.js
vue3种table表格选项个数的控制方法
Apr 14 #Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 #Vue.js
You might like
sql注入与转义的php函数代码
2013/06/17 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
bootstrap模态框实现拖拽效果
2016/12/14 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
[01:23]一分钟告诉你 DOTA2为什么叫信仰2
2014/06/20 DOTA
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
python算法学习之基数排序实例
2013/12/18 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
Python中psutil的介绍与用法
2019/05/02 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
使用python批量修改文件名的方法(视频合并时)
2020/03/24 Python
Python中函数的返回值示例浅析
2019/08/28 Python
python 实现一个图形界面的汇率计算器
2020/11/09 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
劳资人员岗位职责
2013/12/19 职场文书
幼儿园教师的考核评语
2014/04/18 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
党的作风建设心得体会
2014/10/22 职场文书
化工见习报告范文
2014/10/31 职场文书
2015年库房工作总结
2015/04/30 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书