封装好的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 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
js获取div高度的代码
Aug 09 Javascript
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
jQuery css() 方法动态修改CSS属性
Sep 25 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
vue中是怎样监听数组变化的
Oct 24 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中记录用户访问过的产品,在cookie记录产品id,id取得产品信息
2011/05/04 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
php使浏览器直接下载pdf文件的方法
2013/11/15 PHP
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
微信小程序 基础组件与导航组件详细介绍
2017/02/21 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
Vue实现穿梭框效果
2020/09/30 Javascript
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
python自然语言编码转换模块codecs介绍
2015/04/08 Python
Python 实现简单的电话本功能
2015/08/09 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
Python算术运算符实例详解
2017/05/31 Python
Tornado 多进程实现分析详解
2018/01/12 Python
Python实现的读写json文件功能示例
2018/06/05 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
2014全国两会学习心得体会1000字
2014/03/10 职场文书
推荐信格式范文
2014/05/09 职场文书
团队激励口号
2014/06/06 职场文书
销售类求职信
2014/06/13 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
共青团员自我评价
2015/03/10 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js