kPagination纯js实现分页插件
kPagination分页插件
纯js分页插件,压缩版本~4kb,样式可以自定义
demo
使用方法
<div id="pagination"></div>
<script src="kPagination.min.js"></script>
<script>
new kPagination({
id: 'pagination',
currentPage: 1, // 当前页
totalPage: 20,
offset: 5,
showPrev: true,
showNext: true,
jumpPage: true,
jumpText: '跳转'
});
</script>
配置项
| 选项 | 类型 | 说明 |
|---|---|---|
| offset | number | 可以显示的按钮个数 |
| showPrev | boolean | 是否显示上一页按钮 |
| showNext | boolean | 是否显示下一页按钮 |
| jumpPage | boolean | 是否显示跳转输入框 |
| jumpText | string | 跳转按钮的文字 |
| pageChange | function | 页面触发回调 |
| afterRefresh | function | 重新渲染成功回调 |
可选样式
| 选项 | 说明 |
|---|---|
| k-pagination-num-wrap | 分页容器样式 |
| k-pagination-input-wrap | 按钮容器样式 |
| k-pagination-num | 页码样式 |
| k-pagination-num-active | 激活样式 |
| k-pagination-disabled | 禁止样式 |
| k-pagination-num-input | 输入框样式 |
| k-pagination-jump-btn | 跳转按钮样式 |
| k-pagination-jump-dot | 省略号样式 |
附上github地址,喜欢的朋友给个star吧,有bug可以反馈哈,我会第一时间修复
kPagination纯js实现分页插件的更多相关文章
- 纯js客服插件集qq、旺旺、skype、百度hi、msn
原文 纯js客服插件集qq.旺旺.skype.百度hi.msn 客服插件,集qq.旺旺.skype.百度hi.msn 等 即时通讯工具,并可自己添加支持的通讯工具,极简主义,用法自己琢磨.我的博客 h ...
- 原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
- 纯JS前端分页方法(JS分页)
1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...
- 纯js实现分页
原理:所有数据已加载好,js通过遍历部分显示,实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <scri ...
- 纯js手动分页
昨天让做个页面,后台提供所有数据,没有做好分页,需要前端js手动分页. 我参考了 http://www.cnblogs.com/jiechn/p/4095029.html 做了些许改动让分页效果更加完 ...
- 纯js的统计图插件-统计图
第一次写博客,写的不到望大家见谅! 今天给大家分享一个纯js的插件(统计图),有知道的可以在下面评论一起谈论一下,刚学着的时候,我是看了好久才看懂的一个基本结构,到后来我才知道原来直接去原网站上找到复 ...
- vue日历(纯 js,没用任何插件和组件)
效果图: 代码: <template> <div class="calender"> <div class="top"> ...
- 自实现jQuery版分页插件
本篇博客的分页插件是在2017-11-10 的一篇博客的基础上改造的(原博客地址:原生js版分页插件),主要是优化了分页按钮的排列和显示样式,取消首页和末页的箭头按钮,改为数字按钮,并始终把它们分别固 ...
- bootstrap-paginator分页插件的简单使用实例
Document 21:36:40 简述:bootstrap-paginator是一款基于bootstrap的jQuery分页插件. githup项目地址:https://github.com/lyo ...
随机推荐
- 机器学习实战笔记-10-K均值聚类
K-均值聚类 优点:易实现.缺点:可能收敛到局部最小值,大规模数据集上收敛较慢:适用于数值型数据. K-均值聚类(找到给定数据集的k个簇) 算法流程 伪代码: 创建k个点作为起始质心(经常是随机选择) ...
- 机器学习实战笔记-2-kNN近邻算法
# k-近邻算法(kNN) 本质是(提取样本集中特征最相似数据(最近邻)的k个分类标签). K-近邻算法的优缺点 例 优点:精度高,对异常值不敏感,无数据输入假定: 缺点:计算复杂度高,空间复杂度高: ...
- DbWrench002--建模以及数据正向工程和反向工程的具体操作
DbWrench--建模以及数据正向工程和反向工程 参考博客:https://my.oschina.net/u/3459265/blog/1611999 一.数据正向工程 在建模工作中画好的表与表之间 ...
- vuejs基础-style样式
在Vue中使用样式 使用class样式 数组 <h1 :class="['red', 'thin']">这是一个邪恶的H1</h1> 数组中使用三元表达式 ...
- 用递归方法求n!
题目: 编写一个程序,输入n,求n!(用递归的方式实现). public class test { public static long fac(int n){ if(n<0){ return ...
- 《JAVA设计模式》之享元模式(Flyweight)
在阎宏博士的<JAVA与模式>一书中开头是这样描述享元(Flyweight)模式的: Flyweight在拳击比赛中指最轻量级,即“蝇量级”或“雨量级”,这里选择使用“享元模式”的意译,是 ...
- 严重: StandardWrapper.Throwable org.springframework.beans.factory.BeanCreationException: Error creating bean with name
HTTP Status 500 - Servlet.init() for servlet mybatis threw exception type Exception report message S ...
- Assembly language 再读---续
前面已经写到了第三章的数据类型 的那一部分 接下来是一些关于伪指令和其他杂七杂八的东西 1. 当前地址计数器: $ 常用于 计算数组以及字符串的长度,如: .data list db ,,,,, ...
- [fw]Linux系统使用time计算命令执行的时间
Linux系统使用time计算命令执行的时间 当测试一个程序或比较不同算法时,执行时间是非常重要的,一个好的算法应该是用时最短的.所有类UNIX系统都包含time命令,使用这个命令可以统计时间消耗.例 ...
- Codeforces - 1194B - Yet Another Crosses Problem - 水题
https://codeforc.es/contest/1194/problem/B 好像也没什么思维,就是一个水题,不过蛮有趣的.意思是找缺黑色最少的行列十字.用O(n)的空间预处理掉一维,然后用O ...