原生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 相关文章推荐
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
Dec 04 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
javaScript动态添加Li元素的实例
Feb 24 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
Layui Form 自定义验证的实例代码
Sep 14 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 Javascript
JS数组的常用方法整理
Mar 31 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
PHP 日常开发小技巧
2009/09/23 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
php事务处理实例详解
2014/07/11 PHP
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
JS作用域链详解
2017/06/26 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
2017/07/03 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
python socket 超时设置 errno 10054
2014/07/01 Python
python修改注册表终止360进程实例
2014/10/13 Python
Python 功能和特点(新手必学)
2015/12/30 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
c++工程师面试问题
2013/08/04 面试题
Linux的文件类型
2012/03/07 面试题
服务员岗位职责
2014/01/29 职场文书
Nginx的基本概念和原理
2022/03/21 Servers
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js
python实现简单的三子棋游戏
2022/04/28 Python
V Rising 服务器搭建图文教程
2022/06/16 Servers