封装好的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实现2048游戏示例
May 04 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
一文了解vue-router之hash模式和history模式
May 31 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的PDO事务处理机制实例分析
2017/02/16 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
jquery ajax 局部无刷新更新数据的实现案例
2014/02/08 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
jquery.zclip轻量级复制失效问题
2017/01/08 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
webstorm中vue语法的支持详解
2018/05/09 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
TypeScript开发Node.js程序的方法
2019/04/30 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Python合并多个Excel数据的方法
2018/07/16 Python
Python批量删除只保留最近几天table的代码实例
2019/04/01 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
Python网页解析器使用实例详解
2020/05/30 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
2014/06/30 HTML / CSS
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
大学生职业生涯规划书范文
2014/01/04 职场文书
物流仓管员工作职责
2014/01/06 职场文书
大学生如何写自荐信
2014/01/08 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
个人融资协议书
2014/10/02 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
优秀党员个人总结
2015/02/14 职场文书
webpack的移动端适配方案小结
2021/07/25 Javascript