封装好的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/

您可能感兴趣的文章:

javascript forEach通用循环遍历方法
循环遍历一个元素是开发中最常见的需求之一，那么让我们来看一个由框架BASE2和Jquery的结合版本吧.
2010-10-10
JavaScript函数中this指向问题详解
这篇文章主要给大家介绍了关于JavaScript函数中this指向问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
详解JS深拷贝与浅拷贝
这篇文章主要介绍了JS深拷贝与浅拷贝的相关资料，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-08-08
第十章之巨幕页头缩略图与警告框组件
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。本文给大家介绍BootStrap组件第十章之巨幕页头缩略图和警告框组件的相关资料,需要的朋友可以参考下
2016-04-04
JavaScript中new操作符的原理与实现详解
你知道new吗？你知道new的实现原理吗？你能手写new方法吗？不要担心，这篇文件就来带大家深入了解一下JavaScript中的new操作符，感兴趣的小伙伴可以学习一下
2022-10-10
上传图片预览JS脚本 Input file图片预览的实现示例
需要一个用户上传头像预览的功能，因此写了一段上传图片预览JS脚本,Input file图片预览的实现，需要的朋友可以看看
2014-10-10
javascript实现的使用方向键控制光标在table单元格中切换
最近公司开发ERP项目，要求商品入库选择货架号时支持使用方向键快速选择，以提高入库效率。
2010-11-11
深入理解JavaScript的值传递和引用传递
JavaScript有5种基本的数据类型，分别是：布尔、null、undefined、String和Number。这篇文章主要介绍了JavaScript的值传递和引用传递,需要的朋友可以参考下
2018-10-10
js自动生成对象的属性示例代码
大家应该都不知道js可以自动生成对象的属性吧，下面有个不错的示例，感兴趣的朋友可以参考下
2013-10-10
ECMAscrip新特性函数介绍
这篇文章主要介绍了ECMAscrip新特性之函数的扩展,在ECMAScript 2015中，允许为函数的参数添加默认值，将默认值直接写在参数的后面即可,具体情况参考下面文章的详细内容
2021-12-12