解决bootstrap4 使用 bootstrap-paginator不显示样式的问题

最近在使用bootstrap4写一个前台的界面。要使用到分页的功能。查资料基本上都是使用boostrap-paginator这个插件。按网上的例子使用，结果发现不显示样式。怎么调试都不行。找相关的网页也没有发现相关的资料。自己去造这个轮子又感觉太麻烦了。

boostrap-paginator的选项中有一个bootstrapMajorVersion的属性。在git上看boostrap-paginator的资料和源码。发现只有2和3的版本。貌似是不适配4。这真是一个大坑，最近更新的时间是5年前。估计是大神不更新了吧。

然后自己对照3和4的bootstap分页的样式。发现有很大的改变。

<!--boostrap3版本 -->
<ul class="pagination">
<li><a href="#">&laquo;</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">&raquo;</a></li>
</ul>

<!--boostrap4 版本-->
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>

这就是样式不显示的原因。找到的原因之后，再来看boostrap-paginator.js。发现最后有一个默认参数设置的方法。

 $.fn.bootstrapPaginator.defaults = {
        containerClass: "",
        size: "normal",
        alignment: "left",
        bootstrapMajorVersion: 2,
        listContainerClass: "",
        itemContainerClass: function (type, page, current) {
            return (page === current) ? "active" : "";
        },
        itemContentClass: function (type, page, current) {
            return "";
        },
        currentPage: 1,
        numberOfPages: 5,
……………………………………

可以看到itemContainerClass加入一个active的属性。通过查找itemContainerClass关键字发现。

itemContainer.addClass(itemContainerClass).append(itemContent);

可以看到这个就是添加active样式的代码。 

根据boostrap4的新样式，在这个代码后面加入新样式。

itemContainer.addClass(itemContainerClass).append(itemContent);

//bootstap4 修改样式
itemContainer.addClass("page-item");
itemContainer.find("a").addClass("page-link");

就可以直接用boostrap4使用boostrap-paginator.js插件了。