分页插件bs_pagination与Bootstrap4、jQuery3.7.1不兼容的问题

news2024/7/6 20:49:17

问题场景：

分页插件
开发环境：
项目：CRM
IDE：intelij IDEA
JDK: jdk21.0.2
JQuery：3.7.1
Bootstrap：4.6

项目中需要查询数据库中的数据，并且以分页显示的方式显示在页面上，前端页面用到了分页插件——bs_pagination，但是在引入开发包后，运行测试项目后，发现无法得到Demo中的效果，经过检索发现该插件最后一次维护是2014年，已经是十年前的插件了，但不得不说仍然是相当有用的插件。

问题描述

在尝试使用bs_pagination插件的时候，按照文档引入开发包，定义容器，编写初始化JavaScript，但是在项目运行后共出现两个问题：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="/crm-core/css/bootstrap_css_4/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <link href="/crm-core/css/pagination/jquery.bs_pagination.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="/crm-core/js/jquery/jquery-3.7.1-min.js"></script>
    <script type="text/javascript" src="/crm-core/js/bootstrap_js_4/bootstrap.bundle.js"></script>
    <script type="text/javascript" src="/crm-core/js/bs_pagination/localization/en.js"></script>
    <script type="text/javascript" src="/crm-core/js/bs_pagination/jquery.bs_pagination.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#test").bs_pagination({
                totalPages: 100,
            });
        });
    </script>
    <title>测试分页插件</title>
</head>
<body>
<div id="test">
</div>
</body>
</html>

JQuery不兼容的问题

运行后，浏览器控制台出现语法错误报错，提示this.size不是一个函数方法

Uncaught TypeError: this.size is not a function
    bs_pagination jQuery
    <anonymous> http://127.0.0.1:8081/crm-core/TestHTML/testPagination.html:15
    jQuery 2
        e
        t

Bootstrap样式不显示的问题

在修复了JQuery的兼容问题后（修复方法看后面解决方案吧），再次运行项目后，发现分页组件倒是可以加载，但是只是最原始的链接，并没有识别Bootstrap样式。

原因分析：

JQuery不兼容的问题原因

由于项目使用了最新版的JQuery3.7.1，而该插件当时适配的时JQuery1.8，出现不兼容的问题可以理解，好在浏览器控制台给出的报错信息很准确，Uncaught TypeError: this.size is not a function，可以理解为js代码中引用了this.size()方法，但是并没有这个方法的定义，经过一番检索后，发现JQuery1.11之后，this.size()函数就被this.length属性给代替啦，这里需要注意this.length后面没有括号。

 if(this.size() != 1) {
            var err_msg = "You must use this plugin (" + pluginName + ") with a unique element (at once)";
            this.html('<span style="color: red;">' + 'ERROR: ' + err_msg + '</span>');
            $.error(err_msg);
        }

Bootstrap样式不显示的问题原因

在阅读了文章——解决bootstrap4 使用 bootstrap-paginator不显示样式的问题后，我一下子明白了原因所在，主要原因就是该插件当时适配的是BootstrapV2跟V3，而我使用的Bootstrap版本是V4.6，样式有一些明显的变化，但是这篇文章的写作时间是2018年，也比较古早了，提到的解决方案貌似并没有生效。所以决定仔细的阅读一遍bs_pagination.js的源码，经过阅读源码，发现了在动态生产页码按钮的时候，并没有加上BootstrapV4的样式，而是V3的样式，自然不会显示。

解决方案：

JQuery不兼容的问题解决方案

打开bs_pagination.js的源码，Ctrl+F搜索this.size()，将其替换为this.length。

if(this.length != 1) {
            var err_msg = "You must use this plugin (" + pluginName + ") with a unique element (at once)";
            this.html('<span style="color: red;">' + 'ERROR: ' + err_msg + '</span>');
            $.error(err_msg);
        }