纯原生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=" ...
随机推荐
- Cocos2d-x shader学习3： sprite描边(Outline)
Cocos2d-x 3.x的label使用了freetype字体引擎(http://www.freetype.org/),可以很轻松的实现描边和阴影效果.所以本篇文章只针对于sprite来实现描边效果 ...
- 2017-3-9 SQL server 数据库
数据库的定义:数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,简单说数据库是一些存储在硬盘上的数据文件,随着信息技术和市场的发展,数据管理不再仅仅是存储和管理数据,而转变成用户所 ...
- [Selenium With C#学习笔记] Lesson-06 单选按钮
作者:Surpassme 来源:http://www.jianshu.com/p/08ee1929875f 声明:本文为原创文章,如需转载请在文章页面明显位置给出原文链接,谢谢. 单选按钮通常用在需要 ...
- 消消乐、candy crush类三消游戏程序逻辑分析
最近在开发一款类似消消乐的三消游戏,在碰到实现斜方向下落的时候卡住了很长时间.好几天没有思路,原本的思路是一次性预判多个宝石的一连串运动路径,运用缓动运动队列来实现宝石运动路径,例如 下落->滑 ...
- 每天一个Linux命令 7
常用yum命令1)查询 yum list #查询所有可用软件包列表yum search 关键字 #搜索服务器上所有和关键字相关的包2)安装 yum -y install 包名选项: install 安 ...
- 解决Gerrit的git unpack error问题和error Missing unknown ec867cebfd2be97c3603c45fac03c75dcf68d0ca
参考链接:http://www.cnblogs.com/yuxc/p/3508964.html 解决方法: 由于帖子里面用的是mysql数据库,而我用的是h2数据库,还特意自己去找了H2数据库的进入方 ...
- AOP执行增强－Spring 源码系列（5）
AOP增强实现-Spring 源码系列(5) 目录: Ioc容器beanDefinition-Spring 源码(1) Ioc容器依赖注入-Spring 源码(2) Ioc容器BeanPostProc ...
- 【iOS】7.4 定位服务->2.1.3.1 定位 - 官方框架CoreLocation 功能1:地理定位
本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. 本文相关目录: ================== 所属文集:[iOS]07 设备工具 === ...
- Linux云自动化运维第四课
Linux云自动化运维第四课 一.vim 1.vim光标移动 1)在命令模式下 :数字 ###移动到指定的行 G ###文件最后一行 gg ###文件第一行 2)在插入模式下 i ###光标所 ...
- Nagios工作原理
图解Nagios的工作原理 Nagios的主动模式和被动模式 被动模式:就如同上图所显示的那样,客户端起nrpe进程,服务端通过check_nrpe插件向客户端发送命令,客户端根据服务端的指示来调用相 ...