封装好的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 创建对象
Jul 17 Javascript
JS 时间显示效果代码
Aug 23 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
Bootstrap每天必学之js插件
Nov 30 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
Symfony2框架创建项目与模板设置实例详解
2016/03/17 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
2016/12/27 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
解决await在forEach中不起作用的问题
2021/02/25 Javascript
python通过apply使用元祖和列表调用函数实例
2015/05/26 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
详解python单元测试框架unittest
2018/07/02 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
家用个人磨皮机:Trophy Skin
2017/03/30 全球购物
小学运动会入场式解说词
2014/02/18 职场文书
上班时间打瞌睡检讨书
2014/09/26 职场文书
汽车转让协议书范本
2014/12/07 职场文书
检讨书范文
2015/01/27 职场文书
银行先进个人总结
2015/02/15 职场文书
英文产品推荐信
2015/03/27 职场文书