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 ...
随机推荐
- 彻底理解 Linux 的搜索工具: grep 和 awk
grep 官方手册 awk 官方手册, awk 学习资料 1. grep grep 用于打印匹配指定模式的行. 1.1 介绍 grep 命令从输入文件中查找匹配到给定模式列表的行.发现匹配到的行后,默 ...
- Fedora 26 安装搜狗拼音输入法 sogoupinyin
Fcitx 官方 wiki Fcitx GitHub Arch wiki 上关于 Fcitx 的资料 故障排除可以参考这里 Fedora 中文社区 Fedora 中文社区软件源 Fcitx (Flex ...
- 【FICO系列】SAP 创建会计凭证(FB01)的BAPI
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FICO系列]SAP 创建会计凭证(FB01) ...
- 报错:Uncaught SyntaxError: Unexpected token)
用JSON格式传值时,js一直 报这个错误:Uncaught SyntaxError: Unexpected token) 错误位置是:result=eval('('+result+')'): 原因: ...
- servlet--获取类路径下资源
context 获取真实路径(*****) 还可以使用ServletContext对象来获取Web应用下的资源,例如在hello应用的根目录下创建a.txt文件,现在想在Servlet中获取这个资源 ...
- Django csrf,xss,sql注入
一.csrf跨站请求伪造(Cross-site request forgery) CSRF的攻击原理:简单说就是利用了高权限帐号(如管理员)的登录状态或者授权状态去做一些后台操作,但实际这些状态并没有 ...
- opencv2——直方图5
(一)图像直方图 图像的构成是有像素点构成的,每个像素点的值代表着该点的颜色(灰度图或者彩色图).所谓直方图就是对图像的中的这些像素点的值进行统计,得到一个统一的整体的灰度概念.直方图的好处就在于可以 ...
- Codeforces - 1176E - Cover it! - bfs
https://codeforc.es/contest/1176/problem/E 久了不写bfs了.一开始用dfs写,的确用dfs是很有问题的,一些奇怪的情况就会导致多染一些色. 注意无向图的边要 ...
- 消息中间件-技术专区-RocketMQ架构原理
RocketMQ是阿里开源的分布式消息中间件,跟其它中间件相比,RocketMQ的特点是纯JAVA实现:集群和HA实现相对简单:在发生宕机和其它故障时消息丢失率更低. 一.RocketMQ专业术语 P ...
- ls命令输出文件的绝对路径
find $PWD | xargs ls -ld 再结合 grep 筛选