封装好的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 实现的数独解题算法网页实例
Oct 15 Javascript
原生javascript实现拖动元素示例代码
Sep 01 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
Bootstrap每天必学之级联下拉菜单
Mar 27 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
@ResponseBody 和 @RequestBody 注解的区别
Mar 08 Javascript
javascript回调函数详解
Feb 06 Javascript
简谈创建React Component的几种方式
Jun 15 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
token 机制和实现方式
Dec 15 Javascript
CocosCreator如何实现划过的位置显示纹理
Apr 14 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简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
php多重接口的实现方法
2015/06/20 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
php自定义时间转换函数示例
2016/12/07 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
2015/04/20 Javascript
漫谈JS引擎的运行机制 你应该知道什么
2016/06/15 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
ElementUI radio组件选中小改造
2019/08/12 Javascript
jquery 插件重新绑定的处理方法分析
2019/11/23 jQuery
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
详解Python中的__new__()方法的使用
2015/04/09 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
django 发送手机验证码的示例代码
2018/04/25 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
同事吵架检讨书
2014/02/05 职场文书
五年级学生评语
2014/04/22 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
2014年班级工作总结
2014/11/14 职场文书
小学校长个人总结
2015/03/03 职场文书
三下乡个人总结
2015/03/04 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
银行工作心得体会范文
2016/01/23 职场文书
Python时间操作之pytz模块使用详解
2022/06/14 Python
python计算列表元素与乘积详情
2022/08/05 Python