封装好的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中substring和substr的详细介绍与用法
Aug 29 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
js获取本机操作系统类型的两种方法
Dec 19 Javascript
Angular2 组件交互实例详解
Aug 24 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
详解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 获取客户端的真实ip
2009/11/30 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
PHP遍历数组的三种方法及效率对比分析
2015/02/12 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
PHP设计模式之装饰器模式定义与用法简单示例
2018/08/13 PHP
js获取RadioButtonList的Value/Text及选中值等信息实现代码
2013/03/05 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
Javascript动态创建div的方法
2015/02/09 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
Python实现两款计算器功能示例
2017/12/19 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
python -v 报错问题的解决方法
2020/09/15 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
社区春季防火方案
2014/06/02 职场文书
死亡诗社观后感
2015/06/05 职场文书