自己diy一个jquery分页插件

js基础学习过程中，期间经历换工作的各种面试，很多面试官问过：有没有写过jquery插件？等类似问题。

就个人而言，关于jquery插件的文章确实看过不少，但是一直没有动手写一个，一是不想在目前学习js基础知识的时候，插入jQuery的插件的写法；二也是从思想上，可能也没太做好写插件的准备，总是感觉很麻烦，或者说很困难。

但是经历多次的面试之后，觉得还是有必要抓紧时间写一点插件，哪怕当做自己个人前端组件积累的一部分，也得提上日程了。

在新公司入职之后，正好项目刚刚上线，新的需求还没有下来，手头上并没有分到新的需求，就利用这段时间，决定写写jQuery插件了。由易而难，先写了一个模拟select的下拉选择框的插件，给了自己充足的信心。着手分页插件的写法。

从早上到公司开始入手，由于经验上的问题，对于插件需要传入的参数，或者说将来可以自定制的部分考虑的可能并不是很周全，等想到新的课定制部分的时候，会继续修改维护。废话不多说，直接贴代码。



最终的效果图如图所示。

html部分代码：



html部分只有一个盛放分页内容的盒子，class为pages必不可少，css和插件内部都用到了该class。

css部分是用scss编写的，直接贴上scss代码。





插件部分核心js代码：















调用部分代码：



参数解释一下：

currentPage: 数值，当前的页码；totalPage:数值，总页码；showPage:数值，需要展示几个页码；showBeginEnd:布尔值，是否需要展示“首页”和“尾页”，true展示，false不展示；showPrevNext：布尔值，是否展示“上一页”和“下一页”，true展示，false不展示。

以上参数如果都没传的话，都有默认值。

callback:回调函数，分页的核心操作，前台页面调用分页函数之后，进行数据查询等操作，所有操作在这里完成。