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

news2024/11/24 0:36:25

问题场景:

分页插件
开发环境:
项目: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/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1841007.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

嵌入式实验---实验二 中断功能实验

一、实验目的 1、掌握STM32F103中断程序设计流程&#xff1b; 2、熟悉STM32固件库的基本使用。 二、实验原理 1、在上一章的实验基础上&#xff0c;添加一个按键和一个LED&#xff1b; 2、使用中断的方式实现以下两个功能&#xff1a; &#xff08;1&#xff09;KEY1按键…

考研计组chap4指令系统

目录 一、指令格式 155 13.操作码地址码 2.按照地址码数量 &#xff08;1&#xff09;零地址指令 &#xff08;2&#xff09;一地址指令 &#xff08;3&#xff09;二地址指令 &#xff08;4&#xff09;三地址指令 &#xff08;5&#xff09;四地址指令 3.指令长度 …

RabbitMQ实践——超时消息的处理方法

大纲 准备工作整个队列的消息都有相同的时效性抛弃超时消息新建带x-message-ttl的队列新建绑定关系实验 超时消息路由到死信队列新建带死信和ttl的队列新建绑定关系实验 消息指定自己的超时时间新建带死信的队列绑定实验 消息自带TTL和队列TTL的关系消息TTL < 队列指定TTL消…

vxe-table 列表过滤踩坑_vxe-table筛选

但是这个过滤输入值必须是跟列表的值必须一致才能查到&#xff0c;没做到模糊查询的功能&#xff0c;根据关键字来过滤并没有实现。 下面提供一下具体实现方法&#xff1a;&#xff08;关键字来过滤&#xff09; filterNameMethod({ option, row }) {if (row.name.indexOf(op…

Vue65-vue-resource:ajax请求

vue-resource是vue的插件库&#xff0c;用vue.use(xxxx)使用插件。 1、安装 2、引入和使用 这个库&#xff0c;维护的频率不高了。还是建议使用&#xff1a;axios&#xff0c;vue-resource只是了解即可。

Qt Quick 教程(一)

文章目录 1.Qt Quick2.QML3.Day01 案例main.qml退出按钮&#xff0c;基于上面代码添加 4.使用Qt Design StudioQt Design Studio简介Qt Design Studio工具使用版本信息 1.Qt Quick Qt Quick 是一种现代的用户界面技术&#xff0c;将声明性用户界面设计和命令性编程逻辑分开。 …

win11照片裁剪视频无法保存问题解决

win11照片默认走核显&#xff0c;intel的显卡可能无法解码&#xff0c;在设置里把照片的显示卡默认换成显卡就好了

基于百度飞桨PaddleOCR应用开发实践银行卡卡面内容检测识别系统

OCR相关的内容我在之前的工作中虽有所涉及&#xff0c;但是还是比较少的&#xff0c;最近正好需要用到OCR的一些技术&#xff0c;查了一些资料&#xff0c;发现国内的话百度这块做的还是比较全面系统深入的&#xff0c;抱着闲来无事学习了解的心态&#xff0c;这里花了点时间基…

M1失效后,哪个是观察A股的关键新指标?

M1失效后&#xff0c;哪个是观察A股的关键新指标&#xff1f; 央地支出增速差&#xff08;地方-中央支出增速的差值&#xff09;或许是解释沪深300定价更有效的前瞻指标。该数值扩张&#xff0c;则有利于大盘指数&#xff0c;反之亦然&#xff0c;该指标从2017年至今对大盘指数…

【CSS in Depth2精译】1.1.4 源码顺序

解决层叠冲突的最后一环叫做 源码顺序&#xff0c;有时又称为 出现顺序&#xff08;order of appearance&#xff09;。如果其他判定规则均一致&#xff0c;则样式表中后出现的、或者在页面较晚引入的样式表声明&#xff0c;将最终胜出。 也就是说&#xff0c;可以通过控制源码…

解决WebStorm中不显示npm任务面板

鼠标右键项目的package.json文件&#xff0c;然后点击show npm scripts选项。 然后npm工具窗口就显示了&#xff1a;

基于`肿瘤浸润淋巴细胞`的AI风险评分预测`鼻咽癌`的`无局部生存率`|顶刊速递·24-06-20

小罗碎碎念 本期分享的文献是“AI-Based Risk Score from Tumour-Infiltrating Lymphocyte Predicts Locoregional-Free Survival in Nasopharyngeal Carcinoma”&#xff0c;翻译一下&#xff0c;即—— 基于肿瘤浸润淋巴细胞的人工智能风险评分预测鼻咽癌的无局部生存率。 文…

计算机网络——网络层重要协议(IP)

网络层的作用&#xff1a;在复杂的网络环境中确定一个合适的路径 IP 协议&#xff08;Internet Protocol&#xff09; IP 数据报格式 4 位版本号&#xff1a;指定 IP 协议的版本&#xff0c;对于 IPV4 来说就是 44 位首部长度&#xff1a;用于表示 IP 首部的长度&#xff0c…

Java零基础之多线程篇:线程生命周期

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…

数据库 | SQL语言和关系代数汇总篇(*^▽^*)

双重/两个 not exists 嵌套查询 简单分析_两个not exists-CSDN博客 最明白的 not exists 双层嵌套讲解 SQL 查询语句_not exist 嵌套-CSDN博客 1. 答案&#xff1a; 2. 答案&#xff1a; 3. 4. 5. 6. 7. 8. 这个SQL查询是从两个表&#xff08;假设是SPJ和P&#xff09;中检…

Ubuntu服务器搭建Git远程仓库

本文所述方法适用于小型团队在局域网环境中使用Git进行代码版本管理。 1. 安装Git 打开终端(Ctrl + Alt + T) ,输入以下命令: sudo apt update #更新软件包列表信息 sudo apt install git #安装Git 验证Git是否安装成功,可以查看Git版本: git --version 也需…

Java基础入门day63

day63 JSON Jackson方式 package com.saas.test; ​ import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.ObjectMapper; import com.saas.entity.Student; import com.saas.entity.Birth; ​ import java.io.IOException; i…

大学生技能科普 | office 办公软件技能掌握 暑期电脑办公软件培训

为什么要学office&#xff1f; 提高工作效率&#xff1a;通过学习和掌握Office办公软件&#xff0c;可以更加高效地完成文档编辑、数据处理、图表制作等任务。 增强个人竞争力&#xff1a;在当今职场竞争中&#xff0c;熟练掌握Office办公软件已经成为一项基本的技能要求。掌…

FreeRTOS源码分析

目录 1、FreeRTOS目录结构 2、核心文件 3、移植时涉及的文件 4、头文件相关 4.1 头文件目录 4.2 头文件 5、内存管理 6、入口函数 7、数据类型和编程规范 7.1 数据类型 7.2 变量名 7.3 函数名 7.4 宏的名 1、FreeRTOS目录结构 使用 STM32CubeMX 创建的 FreeRTOS 工…

《STM32 HAL库》小米微电机控制例程——通信协议分析及驱动库

之前有段时间因为机器狗项目的缘故&#xff0c;一直在使用小米微电机&#xff0c;但是苦于没有一个详尽的奶妈级教程&#xff0c;在控制电机的学习中踩了不少的坑。今天咱们就从头至尾一步一步的实现使用按键控制小米微电机。本文将会分析小米电机驱动库&#xff0c;并简要介绍…