推荐一个插件 jqPaginator 分页组件
推荐一个插件 jqPaginator 分页组件
木云凌 发表于3个月前
推荐一个插件 jqPaginator 分页组件
  • 发表于 3个月前
  • 阅读 87
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

        首先给链接: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的方法则完全不受影响,总比那些一切包办的好吧?

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

标签: jqpaginator 分页
共有 人打赏支持
木云凌
粉丝 6
博文 50
码字总数 17191
×
木云凌
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: