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实现分页插件的更多相关文章

  1. 纯js客服插件集qq、旺旺、skype、百度hi、msn

    原文 纯js客服插件集qq.旺旺.skype.百度hi.msn 客服插件,集qq.旺旺.skype.百度hi.msn 等 即时通讯工具,并可自己添加支持的通讯工具,极简主义,用法自己琢磨.我的博客 h ...

  2. 原生js版分页插件

    之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

  3. 纯JS前端分页方法(JS分页)

    1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...

  4. 纯js实现分页

    原理:所有数据已加载好,js通过遍历部分显示,实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <scri ...

  5. 纯js手动分页

    昨天让做个页面,后台提供所有数据,没有做好分页,需要前端js手动分页. 我参考了 http://www.cnblogs.com/jiechn/p/4095029.html 做了些许改动让分页效果更加完 ...

  6. 纯js的统计图插件-统计图

    第一次写博客,写的不到望大家见谅! 今天给大家分享一个纯js的插件(统计图),有知道的可以在下面评论一起谈论一下,刚学着的时候,我是看了好久才看懂的一个基本结构,到后来我才知道原来直接去原网站上找到复 ...

  7. vue日历(纯 js,没用任何插件和组件)

    效果图: 代码:   <template> <div class="calender"> <div class="top"> ...

  8. 自实现jQuery版分页插件

    本篇博客的分页插件是在2017-11-10 的一篇博客的基础上改造的(原博客地址:原生js版分页插件),主要是优化了分页按钮的排列和显示样式,取消首页和末页的箭头按钮,改为数字按钮,并始终把它们分别固 ...

  9. bootstrap-paginator分页插件的简单使用实例

    Document 21:36:40 简述:bootstrap-paginator是一款基于bootstrap的jQuery分页插件. githup项目地址:https://github.com/lyo ...

随机推荐

  1. PHP 数组函数-数组排序

    php数组排序函数sort ( &$arr [,fruits] ) 对数组进行从低到高排序 ,并赋予新的键名 返回boolrsort ( &$arr [,fruits] ) 对数组进行 ...

  2. Colourful Rectangle【扫描线】

    题目链接 很明显的可以发现是一个扫描线的问题,但是怎么处理区域呢,发现只有三种颜色,也就是最多也就是7种状态,那么我们可以进行一个状态压缩即可. 但是,在向上pushup的时候,存在我们要以子树的状态 ...

  3. Collection -集合祖宗的常用七种共性方法

    package cn.learn.collection; import java.util.ArrayList; import java.util.Collection; /* 在java.util. ...

  4. no suitable HttpMessageConverter found for response type

    在使用 RestTemplate 或者 Spring Cloud 的时候,经常会出现这个错误. 基本上出现的场景都是,我们要json,结果来了个 text/html. 两个原因: 第一个就是:服务器返 ...

  5. [fw]Real Mode addressing

    Real Mode 在 real mode 中,memory 的使用被限制在 1 MByte(220 bytes) 內,可用的 address 範圍為 0x00000 ~ 0xFFFFF. 由 mem ...

  6. 使用jdbc查询防止出现中文乱码的方法

    在使用mysql创建数据库及表格,在navicat中可以正常查询出中文,但使用jdbc查询的结果中,中文为乱码. 网上查到资料,为了能够彻底一劳永逸的解决这个问题,需要修改mysql下配置文件my.i ...

  7. 大数据-hadoop学习记录

    hadoop 创始人 DogCutting 高效,可扩展性,高容错性,价格低廉的大数据软件处理架构 主要应用于数据分析.数据实时查询.数据挖掘领域 HDFS(HadoopDistributeFileS ...

  8. Nginx学习总结(一)

    Nginx是目前比较主流的HTTP反向代理服务器(其企业版提供了基于TCP层的反向代理插件),对于构建大型分布式web应用,具有举足轻重的作用.简单来说,nginx有2个主要的功能:动/静态资源分离. ...

  9. zabbix3.4.8配置自动发现主机并监控

    一.       自动发现功能简介 Zabbix服务器端通过网络或者主机名等方式进行客户端的扫描发现,从进行加入到监控的主机队列中,适用于批量加入多主机监控的场景. 二.       自动发现功能实施 ...

  10. (转)yum的$releasever真是太反动了

    Posted on 2009年 10月9日 by JulyClyde 来看这篇文章的人,大都应该同意<Unix编程艺术>中提到的那些观点吧.今天就给大家看一个反例:yum 的 $relea ...