封装好的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 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
简单三步实现报表页面集成天气
Dec 15 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
Aug 23 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 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
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
PHP递归返回值时出现的问题解决办法
2013/02/19 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
php查找指定目录下指定大小文件的方法
2014/11/28 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
用js重建星际争霸
2006/12/22 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
如何利用python 读取配置文件
2021/01/06 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
小学生美德少年事迹
2014/02/02 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
出国留学经济担保书
2014/04/01 职场文书
施工安全责任书范本
2014/07/24 职场文书
学校个人对照检查材料
2014/08/26 职场文书
见义勇为事迹材料
2014/12/24 职场文书
2015年基层党组织公开承诺书
2015/01/21 职场文书
初中英语教学随笔
2015/08/15 职场文书
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript