封装好的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 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
Feb 13 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
jquery使用$(element).is()来判断获取的tagName
Aug 24 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 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实现微信公众平台发红包功能
2018/06/14 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
bootstrap按钮插件(Button)使用方法解析
2017/01/13 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
解决vue路由后界面没有变化,但是链接有的问题
2018/09/01 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
Python进程间通信之共享内存详解
2017/10/30 Python
详解Python自建logging模块
2018/01/29 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
详解Python用户登录接口的方法
2019/04/17 Python
Python3.8中使用f-strings调试
2019/05/22 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
Conforama西班牙:您的家具、装饰和电器商店
2020/02/21 全球购物
策划主管的工作职责
2013/11/24 职场文书
机械设计毕业生自荐信
2014/02/02 职场文书
《穷人》教学反思
2014/04/08 职场文书
八达岭长城导游词
2015/01/30 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
司机岗位职责范本
2015/04/10 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
JavaScript实现简单拖拽效果
2021/09/15 Javascript
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS
javascript中Set、Map、WeakSet、WeakMap区别
2022/12/24 Javascript