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

在这里可以讨论JavaScript开发技术,插件应用等方面技术

版主: jvip_chen

版面规则
请不要用站内信件问问题, 有问题直接发到相应版面上, 今后任何此类信件恕不回复.
回复
头像
jvip_chen
社区版主
社区版主
帖子: 195
注册时间: 2019年 1月 5日 13:36 星期六

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

帖子 jvip_chen »

最近在使用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插件了。
回复