封装好的javascript前端分页插件pagination

 更新时间:2016年01月04日 08:53:25   投稿:hebedich  
本文给大家分享一个非常不错的封装好的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.jb51.net/201601/yuanma/pagination-master(jb51.net).zip

演示 http://demo.jb51.net/js/2016/pagination-master/

相关文章

  • 纯JS 绘制数学函数

    纯JS 绘制数学函数

    今天闲来无事用js写了个数学绘图包,还不算完整,不过总出现了雏形。
    2009-04-04
  • JavaScript简单实现鼠标拖动选择功能

    JavaScript简单实现鼠标拖动选择功能

    本篇文章主要是对JavaScript简单实现鼠标拖动选择功能的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • JavaScript ES6中export、import与export default的用法和区别

    JavaScript ES6中export、import与export default的用法和区别

    这篇文章主要给大家介绍了JavaScript ES6中export、import与export default的用法和区别,文中介绍的非常详细,相信对大家学习ES6会有一定的帮助,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-03-03
  • webpack中的模式(mode)使用详解

    webpack中的模式(mode)使用详解

    这篇文章主要介绍了webpack中的模式(mode)使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • js replace替换字符串同时替换多个方法

    js replace替换字符串同时替换多个方法

    这篇文章主要介绍了js replace替换字符串同时替换多个方法 的相关资料,需要的朋友可以参考下
    2018-11-11
  • 小程序瀑布流组件实现翻页与图片懒加载

    小程序瀑布流组件实现翻页与图片懒加载

    这篇文章主要介绍了小程序瀑布流组件实现翻页与图片懒加载,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 基于JavaScript实现大文件上传后端代码实例

    基于JavaScript实现大文件上传后端代码实例

    这篇文章主要介绍了基于JavaScript实现大文件上传后端代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • 移动端翻页插件dropload.js(支持Zepto和jQuery)

    移动端翻页插件dropload.js(支持Zepto和jQuery)

    这篇文章主要为大家详细介绍了移动端翻页插件dropload.js,支持Zepto和jQuery,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • js实现无缝循环滚动

    js实现无缝循环滚动

    这篇文章主要为大家详细介绍了js实现无缝循环滚动的具体代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 编程语言JavaScript简介

    编程语言JavaScript简介

    这篇文章主要介绍了编程语言JavaScript简介,本文讲解了JavaScript是什么、JavaScript特点、JavaScript和Java的区别等内容,需要的朋友可以参考下
    2014-10-10

最新评论