纯原生javascript实现分页效果

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

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

function pageFunc(conf){

    this.myFunc = conf.click //用户点击要执行的方法

    this.total = conf.total; //总页数

    this.currentPage = ;    //当前页码

    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(,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="#">${page}</a>`

    for(var i=;i<=;i++){

        if(page-i>){

            str = `<a attr-action="setWhat" href="#">${page-i}</a>`+str

        }

        if(page+i<total){

            str = str+`<a attr-action="setWhat" href="#">${(page+i)}</a>`

        }

    };

    if(page->){

        str = '<span>...</span>'+str

    };

    if(page+<total){

        str = str+'<span>...</span>'

    };

    if(page>){

        str = `<a class="lmw-pre" href="#">上一页</a><a attr-action="setWhat" href="#"></a>`+str

    };

    if(page<total){

        str = str+`<a attr-action="setWhat"  href="#">${total}</a><a class="lmw-add"  href="#">下一页</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 = , l = obj.length; i < l; i++) {

  $addEvent(obj[i], type, handle);

 }

 return;

 }

 if( type instanceof Array) {

 for(var i = , 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:#;

            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:#;

            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':,

    'click':function(e){ //e为当前页码

/*        $.get('/php',{"page":e},function(data){

            console.log('ok')

        })*/

    }

}

var page = new pageFunc(conf);

</script>

</html>

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

欢迎加入大前端交流群！群号：277942610，VIP新群

纯原生javascript实现分页效果的更多相关文章

原生javascript实现分页效果+搜索功能
一.概述首先,我们要明确为何需要分页技术,主要原因有以下: 1.分页可以提高客户体验度,适当地选择合适的数据条数,让页面显得更有条理,使得用户体验感良好,避免过多数据的冗余. 2.提高性能的需要. ...
原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）
虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang=&qu ...
原生JS实现分页效果1.0
不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en">&l ...
原生js显示分页效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
原生JavaScript实现新手引导效果（第二个玩具）
慕课地址https://www.imooc.com/video/169 预览效果: <!DOCTYPE html> <html> <head> <meta c ...
纯原生javascript下拉框表单美化实例教程
html的表单有很强大的功能,在web早期的时候,表单是页面向服务器发起通信的主要渠道.但有些表单元素的样式没办法通过添加css样式来达到满意的效果,而且不同的浏览器之间设置的样式还存在兼容问题,比如 ...
使用JavaScript实现分页效果
应公司需求,有时需要制作静态页面网站,而一旦涉及到文章的分页,实现起来非常麻烦,自己又刚入门,对js不是很熟悉,所以就拿来练练手. 首先页面结构如下,分别展示数据跟分页: <!DOCTYPE h ...
原生 JavaScript 图片裁剪效果
图片裁剪程序效果如下,可鼠标操作. 拖动左边小方框时在右侧实时显示对应的裁剪图片,同时左侧的拖动框里图片完全显示,拖动框外部图片模糊显示.8个控制点可以对显示区域大小进行控制. HTML 和 CS ...
原生js实现分页效果（带实例）
小小插件(静态分页) 效果图: 首先实现简单功能: <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

随机推荐

MySQL Sniffer
MySQL Sniffer 是360开源的一个基于 MySQL 协议的抓包工具, 能实时抓取客户端端请求,并格式化输出操作语句,操作十分简单.对于问题的定位,操作的审核是个不错的利器. Github地 ...
CAAnimation动画--(旋转/缩放/移动/闪烁)
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Menlo; color: #1d9421 } p.p2 { margin: 0.0px 0. ...
Java设计模式之《调停者模式》及应用场景
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6518603.html 调停者模式. 我们想象一下这样的场景:一个系统内部通过许多的类互相之 ...
hog特征及其提取方法图示
1 什么是hog特征 hog特征是histogram of gradient的缩写.我们观察图像时,信息更多来自目标边沿的突变.我们计算一块区域内的所有像素处的梯度信息,即突变的方向和大小,然后对36 ...
CentOS7搭建Confluence Wiki
前言在艾佳生活实习时,有三款团队协作系统特别喜欢:Wiki.Jira和Jenkins.对于Jenkins的搭建,之前<自动部署工具Jenkins>有过记录.这次,搭建一个Wiki,作为知 ...
[原创]ASM动态修改JAVA函数之函数字节码初探
ASM是非常强大的JAVA字节码生成和修改工具,具有性能优异.文档齐全.比较易用等优点.官方网站:http://asm.ow2.org/ 要想熟练的使用ASM,需要对java字节码有一定的了解,本文重 ...
C#随机取得可用端口号
TCP与UDP段结构中端口地址都是16比特,可以有在0---65535范围内的端口号.对于这65536个端口号有以下的使用规定: (1)端口号小于256的定义为常用端口,服务器一般都是通过常用端口号来 ...
使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式
text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...
Android 7.0 调取系统相机崩溃解决android.os.FileUriExposedException
一.写在前面最近由于廖子尧忙于自己公司的事情和OkGo(一款专注于让网络请求更简单的网络框架) ,故让LZ 接替维护ImagePicker(一款支持单.多选.旋转和裁剪的图片选择器),也是处理了诸多 ...
查看 NDK 版本
打开Android Studio , 打开左上角的菜单, File => Settings... 打开一个弹窗. 然后在 Appearance & Behavior =>Syst ...

纯原生javascript实现分页效果

纯原生javascript实现分页效果的更多相关文章

随机推荐

热门专题