封装好的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 相关文章推荐
多个js与css文件的合并方法详细说明
Dec 26 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
Node.js的特点详解
Feb 03 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 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抓取https的内容的代码
2010/04/06 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
雄兵连第三季海报曝光,艾妮熙德成主角,蔷薇新造型
2021/03/09 国漫
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
2016/09/27 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
Vue响应式原理详解
2017/04/18 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
Python基于requests库爬取网站信息
2020/03/02 Python
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
利用纯html5绘制出来的一款非常漂亮的时钟
2015/01/04 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
干部培训自我鉴定
2014/01/22 职场文书
护理中职生求职信范文
2014/02/24 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
2014年行政执法工作总结
2014/12/11 职场文书
评职称个人总结
2015/03/05 职场文书
关于迟到的检讨书
2015/05/06 职场文书
CAD实训总结范文
2015/08/03 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
python图片灰度化处理的几种方法
2021/06/23 Python