封装好的javascript前端分页插件pagination


Posted in Javascript onJanuary 04, 2016

摘要:
    最近在开发项目中又用到了前端分页,以前也做过,为了方便以后使用所以将他封装成第三方插件,不依赖任何库。网上已经有很多插件,问什么还要自己造轮子?

自己写的扩展性高
不依赖任何库
作为一次技术沉淀

先看下效果图

封装好的javascript前端分页插件pagination

安装方法

首先在页面中要载入css及js
<link rel="stylesheet" href="dist/pagination.css">
<script src="dist/pagination.js"></script>

使用示例

pagination({
    cur: 1,     // 当前页数   
    total: 6,        // 总共多少页  
    len: 5,          // 分页显示多少    
    targetId: 'pagination', // 分页元素绑定    
    callback: function() {   
        // 回调函数  
    }  
}) 

参数介绍

cur

当前页数,每次调用传递当前分页

total

总共多少页,根据总数和每页显示数量可以获取

len

分页栏上显示的数量

targetId

分页元素绑定的

callback

页面渲染完成之后执行的函数,比如事件绑定等。

tips
demo是用的静态数据,如果调用服务端的数据,只需将index.js文件中的for循环改成Ajax请求就可以了。

下载 http://xiazai.3water.com/201601/yuanma/pagination-master(3water.com).zip

演示 http://demo.3water.com/js/2016/pagination-master/

Javascript 相关文章推荐
Prototype ObjectRange对象学习
Jul 19 Javascript
Javascript var变量隐式声明方法
Oct 19 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
jquery实现邮箱自动补全功能示例分享
Feb 17 Javascript
js的Prototype属性解释及常用方法
May 08 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
canvas知识总结
Jan 25 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
详解javascript的变量与标识符
Jan 04 #Javascript
bootstrap实现弹窗和拖动效果
Jan 03 #Javascript
基于javascript实现窗口抖动效果
Jan 03 #Javascript
理解jquery事件冒泡
Jan 03 #Javascript
实例讲解避免javascript冲突的方法
Jan 03 #Javascript
详解js中class的多种函数封装方法
Jan 03 #Javascript
js中利用tagname和id获取元素的方法
Jan 03 #Javascript
You might like
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
PHP Cookie学习笔记
2016/08/23 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
PHP脚本自动识别验证码查询汽车违章
2016/12/20 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
JavaScript 学习笔记(九)call和apply方法
2010/01/11 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
angularjs实现的前端分页控件示例
2017/02/10 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
python pandas时序处理相关功能详解
2019/07/03 Python
python3实现单目标粒子群算法
2019/11/14 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
python等待10秒执行下一命令的方法
2020/07/19 Python
Python学习笔记之装饰器
2020/08/06 Python
Python pip 常用命令汇总
2020/10/19 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
对于没有初始化的变量的初始值可以作怎样的假定
2014/10/12 面试题
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
大学生见习总结报告
2015/06/24 职场文书
MySQL为id选择合适的数据类型
2021/06/07 MySQL
Python实现双向链表
2022/05/25 Python