封装好的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 相关文章推荐
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
JS画5角星方法介绍
Sep 17 Javascript
js通过iframe加载外部网页的实现代码
Apr 05 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
Angularjs上传图片实例详解
Aug 06 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
JavaScript简单编程实例学习
Feb 14 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
详解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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
js获取class的所有元素
2013/03/28 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
2013/04/24 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
node.js中的fs.readdirSync方法使用说明
2014/12/17 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
jQuery中on()方法用法实例详解
2015/02/06 Javascript
JS基于面向对象实现的放烟花效果
2015/05/07 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
详解node登录接口之密码错误限制次数(含代码)
2019/10/25 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
python采用getopt解析命令行输入参数实例
2014/09/30 Python
Python中使用PIL库实现图片高斯模糊实例
2015/02/08 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
畜牧兽医本科生的自我评价
2014/03/03 职场文书
投标担保书范文
2014/04/02 职场文书
入股协议书范本
2014/04/14 职场文书
商务英语专业求职信
2014/06/26 职场文书
2014年幼儿园德育工作总结
2014/12/17 职场文书
人事主管岗位职责
2015/02/04 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
2015年保洁员工作总结
2015/05/04 职场文书
成绩单家长意见
2015/06/03 职场文书