封装好的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中的float的代码
Aug 16 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
Jun 07 Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 Javascript
Node.js Stream ondata触发时机与顺序的探索
Mar 08 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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开发者事半功倍的十大技巧小结
2010/04/20 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
php 猴子摘桃的算法
2017/06/20 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
javascript+iframe 实现无刷新载入整页的代码
2010/03/17 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
js优化针对IE6.0起作用(详细整理)
2012/12/25 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
Bootstrap每天必学之弹出框(Popover)插件
2016/04/25 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
js 图片转base64的方式(两种)
2018/04/24 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python科学画图代码分享
2017/11/29 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
Django 大文件下载实现过程解析
2019/08/01 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
Matplotlib.pyplot 三维绘图的实现示例
2020/07/28 Python
婚礼主持词
2014/03/13 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
本科应届生自荐信
2014/06/29 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
部门主管竞聘书
2015/09/15 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
python实现语音常用度量方法的代码详解
2021/05/25 Python