原生javascript实现分页效果


Posted in Javascript onApril 21, 2017

随着近几年前端行业的迅猛发展,各种层出不穷的新框架,新方法让我们有点眼花缭乱。

最近刚好比较清闲,所以没事准备撸撸前端的根基javascript,纯属练练手,写个分页,顺便跟大家分享一下

function pageFunc(conf){
 this.myFunc = conf.click //用户点击要执行的方法
 this.total = conf.total; //总页数
 this.currentPage = 1; //当前页码
 this.init()  //初始化 
}

pageFunc.prototype.init = function(){
 var total = this.total,
 currentPage = this.currentPage,
 _this = this;

 listeners = {
 'setWhat' : function(opts) {
  _this.aClick(opts.src)
  return false;
 }
 };

 listenersPre = {
 'lmw-pre' : function(opts) {
  _this.prevClick()
  return false;
 }
 };

 listenersAdd = {
 'lmw-add' : function(opts) {
  _this.addClick()
  return false;
 }
 };

 var rootele = this.createPage(1,total);
 document.getElementById('page-coat').innerHTML = rootele

 $on(document.getElementById('page-coat'), ['click'], listeners);//点击a标签
 $on(document.getElementById('page-coat'), ['click'], listenersPre);//点击上一页
 $on(document.getElementById('page-coat'), ['click'], listenersAdd);//点击下一页

}
//创建HTML分页结构字符串
pageFunc.prototype.createPage = function(page,total){
 var str = `<a class="lmw-current" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${page}</a>`
 for(var i=1;i<=3;i++){
 if(page-i>1){
  str = `<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${page-i}</a>`+str
 }
 if(page+i<total){
  str = str+`<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${(page+i)}</a>`
 }
 };
 if(page-4>1){
 str = '<span>...</span>'+str
 };
 if(page+4<total){
 str = str+'<span>...</span>'
 };
 if(page>1){
 str = `<a class="lmw-pre" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一页</a><a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>`+str
 };
 if(page<total){
 str = str+`<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${total}</a><a class="lmw-add" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一页</a>`
 };
 return str
}
//上一页方法
pageFunc.prototype.prevClick = function(){
 var total = this.total
 var va = --this.currentPage 
 var newret = this.createPage(va, total)
 document.getElementById('page-coat').innerHTML = newret
 this.myFunc(va) 
}
//下一页方法
pageFunc.prototype.addClick = function(){
 var total = this.total
 var va = ++this.currentPage
 var newret = this.createPage(va, total)
 document.getElementById('page-coat').innerHTML = newret 
 this.myFunc(va) 
};
//点击方法
pageFunc.prototype.aClick = function(_this){
 var total = this.total
 var va = parseInt(_this.innerText);
 this.currentPage = va
 var rootele = this.createPage(va, total)
 document.getElementById('page-coat').innerHTML = rootele
 this.myFunc(va) 
};


//二:封装事件代理方法
function $on(dom, event, listeners) {
 $addEvent(dom, event, function(e) {
 var e = e || window.event,
 src = e.target || e.srcElement,
 action,
 returnVal;
 
 while (src && src !== dom) {
 action = src.getAttribute('attr-action') || src.getAttribute('class') ;
 if (listeners[action]) {
 returnVal = listeners[action]({
 src : src,
 e : e,
 action : action
 });

 if (returnVal === false) {
 break;
 }
 }
 src = src.parentNode;
 }
 });
};
//1、封装跨浏览器事件绑定方法
function $addEvent(obj, type, handle) {
 if(!obj || !type || !handle) {
 return;
 }

 if( obj instanceof Array) {
 for(var i = 0, l = obj.length; i < l; i++) {
 $addEvent(obj[i], type, handle);
 }
 return;
 }

 if( type instanceof Array) {
 for(var i = 0, l = type.length; i < l; i++) {
 $addEvent(obj, type[i], handle);
 }
 return;
 }
//2、解决IE中this指向window的问题
 function createDelegate(handle, context) {
 return function() {
 return handle.apply(context, arguments);
 };
 }
 
 if(window.addEventListener) {
 var wrapper = createDelegate(handle, obj);
 obj.addEventListener(type, wrapper, false);
 }
 else if(window.attachEvent) {
 var wrapper = createDelegate(handle, obj);
 obj.attachEvent("on" + type, wrapper);
 }
 else {
 obj["on" + type] = handle;
 }
};

使用方法:

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <title>分页效果</title>
 <style type="text/css">
 #page-coat a{
  text-decoration:none; 
  display: inline;
  float: left;
  padding: 3px 10px 3px 10px; 
  overflow: hidden; 
  border:1px solid #ccc;
  color:#999;
  margin-right: 5px;
  cursor: pointer;
  background: #fff;
  
 }
 #page-coat a:hover{
  border: 1px solid #FF6600;
  background-color: #FF6600;
  color: #fff; 
 }
 #page-coat span{
  display: inline;
  float: left;
  color:#999;
  background: #fff;
 }
 #page-coat a.lmw-current{
  color: #FF6600;
  border: 1px solid #FF6600;
  background-color: #FFEEE5;
 }
 </style>
</head>
<body class="l-bg2">
 <div id="page-coat">
 
 </div> 
</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript">
var conf = {
 'total':100,
 'click':function(e){ //e为当前页码
/* $.get('/php',{"page":e},function(data){
  console.log('ok')
 })*/
 }
}
var page = new pageFunc(conf);
</script>
</html>

用原生还是比较麻烦的,为了实现业务,还得去封装一个模仿JQ的.on事件绑定方法。写的比较简陋,一些配置接口没有暴露出来,还可以再抽象暴露。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
Jquery动态进行图片缩略的原理及实现
Aug 13 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
浅谈react性能优化的方法
Sep 05 Javascript
微信小程序 跳转方式总结
Apr 20 #Javascript
微信小程序 setData的使用方法详解
Apr 20 #Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 #Javascript
微信小程序中form 表单提交和取值实例详解
Apr 20 #Javascript
ES6新特性一: let和const命令详解
Apr 20 #Javascript
javascript 正则表达式分组、断言详解
Apr 20 #Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 #jQuery
You might like
PHP的加密方式及原理
2012/06/14 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
关于javascript 回调函数中变量作用域的讨论
2009/09/11 Javascript
javascript对象之内置对象Math使用方法
2010/04/16 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
2016/01/22 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
2016/09/08 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
2018/09/05 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
使用Python对Excel进行读写操作
2017/03/30 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
python3中的eval和exec的区别与联系
2019/10/10 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
谈谈Python:为什么类中的私有属性可以在外部赋值并访问
2020/03/05 Python
django的autoreload机制实现
2020/06/03 Python
如何基于Django实现上下文章跳转
2020/09/16 Python
scrapy与selenium结合爬取数据(爬取动态网站)的示例代码
2020/09/28 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
html5中去掉input type date默认样式的方法
2018/09/06 HTML / CSS
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
大学活动邀请函
2014/01/28 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
集中整治工作方案
2014/05/01 职场文书
三八红旗手先进事迹材料
2014/05/13 职场文书
爱护公共设施的标语
2014/06/24 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
Python经常使用的一些内置函数
2022/04/11 Python