问题场景:
开发环境:
项目: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);
}
Bootstrap样式不显示的问题解决方案
修改bs_pagination.js源码,根据自己的需要调整源码,由于代码行数比较多,将其放在GitCode上了,有需要的可以下载,同时还加入了中文注释,需要的同学可以下载学习。
https://gitcode.com/weixin_44803446/bs_pagination_1.0.5/