封装好的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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
Apr 07 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
jquery each的几种常用的使用方法示例
Jan 21 Javascript
使用jQuery时Form表单元素ID和name命名大忌
Mar 06 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
Apr 29 Javascript
vue 限制input只能输入正数的操作
Aug 05 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 设计模式之 工厂模式
2008/12/19 PHP
解析PHP跳出循环的方法以及continue、break、exit的区别介绍
2013/07/01 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
php使用curl伪造浏览器访问操作示例
2019/09/30 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
2020/06/16 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
python实现问号表达式(?)的方法
2013/11/27 Python
Python实现提取文章摘要的方法
2015/04/21 Python
python逆向入门教程
2018/01/15 Python
python集合常见运算案例解析
2019/10/17 Python
Python time库基本使用方法分析
2019/12/13 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
h5移动端调用支付宝、微信支付的实现
2020/06/08 HTML / CSS
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
工程监理应届生求职信
2013/11/09 职场文书
清洁工表扬信
2014/01/08 职场文书
元旦晚会邀请函
2014/01/27 职场文书
商场广播稿范文
2015/08/19 职场文书
考研经验交流会策划书
2015/11/02 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
电频谱管理的原则是什么
2022/02/18 无线电
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python