文档章节

推荐一个插件 jqPaginator 分页组件

木云凌
 木云凌
发布于 2017/09/07 12:12
字数 1350
阅读 506
收藏 0
点赞 0
评论 0

        首先给链接:http://jqpaginator.keenwon.com/ ,好像是作者的网站来的,随时下载,有源码。

        链接给完后,先来聊聊我对前端插件集成的看法,有不同见解的可以留言交流。

        我业余的时候在做一个自己设计的网站,目的有俩:一、设计一个自己的产品;二、实践自己的架构理念(有些想法在工作的项目中很难加进去,因为已有其他在用的设计了),这样以后跟朋友聊技术的时候,更有底气一点。

        这个项目并没有使用前端框架,直接就是js、jq和一些其他插件,做到分页的时候,我开始在网上搜寻有哪些好用的分页插件,大都不如人意。有的插件直接集成了table,这样它就直接帮你解决了数据请求和展示以及分页等问题了。但是这样的插件我比较警惕,因为我在想这样的集成度是不是太高了点。这就扯出了我平时主张的一个思想:工具集成必须考虑松耦合。

        写工具的时候,通常第一个想法就是:帮你把所有麻烦都解决了,使用者只需要一步就OK。无需置疑,这样的工具刚开始用的时候确实很爽,毕竟一步包办table和分页。但是高集成往往是高耦合,如果以后出现一些奇葩需求,这种高耦合就成了一个负担。

        我心目中的分页插件是这样的:它只管分页就行了,其他的什么都别管。就是这样,我找到了jqpaginator,它是一个boostrap风格的插件,只需要给他指定一个div元素,js调用一个方法就出来一个默认的分页了,如下:

$('#id').jqPaginator({
    totalPages: 100,
    visiblePages: 10,
    currentPage: 1,
    onPageChange: function (num, type) {
        $('#text').html('当前第' + num + '页');
    }
});

        以至于他的网站上的说明都没几行,因为这货几乎不需要文档,看这个表格就完事了:

参数

参数 默认值 说明
totalPages 0 设置分页的总页数
totalCounts 0 设置分页的总条目数
pageSize 0 设置每一页的条目数
注意:要么设置totalPages,要么设置totalCounts + pageSize,否则报错;设置了totalCounts和pageSize后,会自动计算出totalPages。
currentPage 1 设置当前的页码
visiblePages 7 设置最多显示的页码数(例如有100也,当前第1页,则显示1 - 7页)
disableClass 'disabled' 设置首页,上一页,下一页,末页的“禁用状态”样式
activeClass 'active' 设置当前页码样式
first bootstrap风格 设置“首页”的Html结构
prev bootstrap风格 设置“上一页”的Html结构
next bootstrap风格 设置“下一页”的Html结构
last bootstrap风格 设置“末页”的Html结构
page bootstrap风格 设置页码的Html结构,其中可以使用{{page}}代表当前页,{{totalPages}}代表总页数,{{totalCounts}}代表总条目数(例如:上面的“极简风格”的Demo,就是使用了{{占位符}},并将visiblePages设为1实现的。)
注意:first、prev、next、last。page只要设置一个,其余未设置的会变为空。
wrapper (无) 分页结构的Html包裹,例如:<div class="your class"></div>,一般不会用到
onPageChange (无) 回调函数,当换页时触发(包括初始化第一页的时候),会传入两个参数:
1、“目标页"的页码,Number类型
2、触发类型,可能的值:“init”(初始化),“change”(点击分页)

        它真的完全是我心里所想象的那个插件:只有分页,其他的啥也别管。当然单纯的只有分页肯定是不够好用的,所以它每次点击(页数发生变化时)都会有个回掉函数,我这这里面作判断,然后执行自己的渲染表格的方法就可以了:

onPageChange (无) 回调函数,当换页时触发(包括初始化第一页的时候),会传入两个参数:
1、“目标页"的页码,Number类型
2、触发类型,可能的值:“init”(初始化),“change”(点击分页)

        后来我用它做了进一步封装成通用的分页方法,只有三个参数:1、放置分页元素的id;2、后端传递回来的分页信息;3、需要在页数变化时执行的回调函数中执行的方法名。这样就可以渲染分页到对应的元素,同时,将后端传递过来的分页信息一一配置到插入分页的方法里,并且在回掉函数里使用 eval 方法来执行这个方法即可。每次执行这个方法都会把页码传递过去,方法接受即可。

         这样我就有了一个单纯的分页方法,使用简单并且松耦合。虽然我需要另外处理table的页面渲染,但是这正是我希望获得的自由度啊。如果有必要,再封装一个渲染table的方法则完全不受影响,总比那些一切包办的好吧?

        以上也实践了我的一些简单的思想,也推荐大家使用它,这并不是广告。也许还有更好的插件我还没了解到,如果有的话,也会学习和推荐。

© 著作权归作者所有

共有 人打赏支持
木云凌

木云凌

粉丝 13
博文 73
码字总数 28431
作品 0
广州
高级程序员
基于jquery的自定义分页控件--jqPaginator

效果截图: 现在网上各种各样的分页组件很多,但是很难找到十分“称心如意”的,于是jqPaginator诞生了。 我心中理想的分页组件,要不受CSS框架限制,可以使用在各种不同风格中的网页中。以我...

semanwmj
2014/05/11
25.3K
1
分页插件(基于jq和bootstrap)

感兴趣的可以下来自己看看:https://github.com/jx915/jqPaginator 一:引入js以及bootstrap.css文件 二:html 三:js 1.初始化 2.可以作为公共函数用来初始化 3.分页点击函数 效果图:分页 ...

天空影
2017/10/27
0
0
推荐十个最新免费的 jQuery 表格插件

作为开发者都知道插件的重要性,有了插件的帮助,工作会更加高效。这次,我们收集了一些优秀的 jQuery 表格插件介绍给大家。 创建一个表格(table)并调整其规模,是一项艰难而繁琐的工作。作...

oschina
2015/06/10
30.4K
10
推荐一款Mybatis分页插件

推荐一款Mybatis分页插件 以前也写过一篇博文介绍Mybatis的插件,以及如何通过Mybatis的插件功能实现一个自定义的分页插件,但是那个插件的侵入性是比较大的。前段时间遇到了一款开源的Mybat...

elim1
2017/06/01
0
0
Mybatis 分页插件 3.5.0 发布

Mybatis 分页插件 3.5.0 发布,更新内容如下: 增加更丰富的调用方法#23 参数中的reasonable、pageSizeZero都可以覆盖默认配置,如果传null会用默认配置。 startPage(int pageNum, int pageS...

Liuzh_533
2015/01/12
3.3K
14
v-page 1.3.0 发布,基于 Vue2 的简洁高效的独立分页组件

v-page 1.3.0版本发布,基于Vue2的简洁高效的独立分页组件 更新内容: 1.3.0: 修复插件页码在部分情况下会消失的问题 1.2.0: 增加插件初始化时就触发分页请求功能 调整内容显示为模板处理 ...

TerryZ
04/28
0
0
SSM(七)在JavaWeb应用中使用Redis

前言 由于最近换(mang)了(de)家(yi)公(bi)司接触了新的东西所以很久没有更新了。这次谈谈Redis,关于应该很多朋友就算没有用过也听过,算是这几年最流行的之一了。的应用场景非常多这里就不一...

crossoverJie
2016/12/18
238
0
jQuery分页插件

开发背景 最近接了一个小型电商网站,各大商品分类都需要用到分页的技巧,虽说我只是个后台汪,但是不想搞前端的后台不是一个好开发。参考了网上的某个简单的分页插件,重新封装了下,支持a...

叫我宫城大人
2017/05/04
0
0
alun/BootstrapPager

一个精巧的Bootstrap分页插件 这是一个javascript实现的Bootstrap分页插件,非常精细小巧,您不需要依赖任何第三方类库,只需要通过简单的引用调用,即可实现动态显示Bootstrap分页组件。 样...

alun
2017/03/30
0
0
mybatis到底哪里好,为什么大家都说要用这个而不是hibernate和JPA呢?

问下各位大哥大姐们,我也是听了网上说的,mybatis好,于是再三抉择下,开始选用这个作为底层的ORM框架。好了,用了一阵,问题来了,处理对象嵌套的时候,要用到resuthandler这个就不说了,可...

蓝血的阿健
2015/10/15
12.8K
24

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Mybatis收集配置

一、Mybatis取Clob数据 1、Mapper.xml配置 <resultMap type="com.test.User" id="user"> <result column="id" property="id"/> <result column="json_data" property="jsonData" ......

星痕2018
23分钟前
0
0
centos7设置以多用户模式启动

1、旧版本linux系统修改inittab文件,在新版本执行vi /etc/inittab 会有以下提示 # inittab is no longer used when using systemd. # # ADDING CONFIGURATION HERE WILL HAVE NO EFFECT ON......

haha360
55分钟前
0
0
OSChina 周日乱弹 —— 局长:怕你不爱我

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ andonny :分享周二珂的单曲《孤独她呀》 《孤独她呀》- 周二珂 手机党少年们想听歌,请使劲儿戳(这里) @孤星闵月 :没事干,看一遍红楼梦...

小小编辑
今天
147
9
Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式 Factory工厂模式 Singleton单例模式 Delegate委派模式 Strategy策略模式 Prototype原型模式 Template模板模式 Spring5 beans 接口实例化 代理Bean操作 ...

小致dad
今天
0
0
SpringBoot | 第十章:Swagger2的集成和使用

前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成。现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的...

oKong
今天
10
0
Python 最小二乘法 拟合 二次曲线

Python 二次拟合 随机生成数据,并且加上噪声干扰 构造需要拟合的函数形式,使用最小二乘法进行拟合 输出拟合后的参数 将拟合后的函数与原始数据绘图后进行对比 import numpy as npimport...

阿豪boy
今天
17
0
云拿 无人便利店

附近(上海市-航南路)开了家无人便利店.特意进去体验了一下.下面把自己看到的跟大家分享下. 经得现场工作人员同意后拍了几张照片.从外面看是这样.店门口的指导里强调:不要一次扫码多个人进入....

周翔
昨天
1
0
Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
昨天
246
1
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
昨天
1
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部