封装好的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教程
Jun 09 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
利用jq让你的div居中的好方法分享
Nov 21 Javascript
原生javascript模仿win8等待提示圆圈进度条
Apr 24 Javascript
JSON格式化输出
Nov 10 Javascript
JS深度拷贝Object Array实例分析
Mar 31 Javascript
js给table赋值的实例代码
Oct 13 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
vue一个页面实现音乐播放器的示例
Feb 06 Javascript
webpack的 rquire.context用法实现工程自动化的方法
Feb 07 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 addslashes和mysql_real_escape_string
2010/01/24 PHP
php下正则来匹配dede模板标签的代码
2010/08/21 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
jquery实现textarea输入框限制字数的方法
2015/01/15 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
举例简介AngularJS的内部语言环境
2015/06/17 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
2016/01/25 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
2019/04/04 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
Python解释执行原理分析
2014/08/22 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
python3中property使用方法详解
2019/04/23 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
优秀学生自我鉴定范例
2013/12/18 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
员工保密承诺书
2014/05/28 职场文书
工程项目经理任命书
2014/06/05 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
2019公司管理制度
2019/04/19 职场文书
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL