封装好的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 相关文章推荐
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
在jQuery1.5中使用deferred对象 着放大镜看Promise
Mar 12 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战二)
Aug 21 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
详解小程序云开发数据库
May 20 Javascript
js 根据对象数组中的属性进行排序实现代码
Sep 12 Javascript
详解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 编程请选择正确的文本编辑软件
2006/12/21 PHP
php print EOF实现方法
2009/05/21 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
js传值 判断
2006/10/26 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
node.js中的console用法总结
2014/12/15 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
js实现全选和全不选
2020/07/28 Javascript
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
Python将图片转换为字符画的方法
2020/06/16 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
python matplotlib库绘制条形图练习题
2019/08/10 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
通过自学python能找到工作吗
2020/06/21 Python
如何用JQuery进行表单验证
2013/05/29 面试题
教师中国梦演讲稿
2014/04/23 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书
MySQL 数据库范式化设计理论
2022/04/22 MySQL
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android