原生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 miniui 教程 表格控件 合并单元格应用
Nov 25 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
微信小程序 跳转方式总结
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
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
JavaScript 数组的 uniq 方法
2008/01/23 Javascript
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
Windows系统下使用flup搭建Nginx和Python环境的方法
2015/12/25 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
python双向链表原理与实现方法详解
2019/12/03 Python
美国著名的女性内衣零售商:Frederick’s of Hollywood
2018/02/24 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
办公室驾驶员岗位职责
2013/11/15 职场文书
大学学习生活感言
2014/01/18 职场文书
中介业务员岗位职责
2014/04/09 职场文书
企业理念标语
2014/06/09 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
Golang表示枚举类型的详细讲解
2021/09/04 Golang
零基础学java之循环语句的使用
2022/04/10 Java/Android