推荐一个插件 jqPaginator 分页组件

2019独角兽企业重金招聘Python工程师标准>>>

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

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

转载于:https://my.oschina.net/watsonos/blog/1531196