当前位置： 首页 > article >正文

bootstrap 表格插件bootstrap table 的使用经验谈！

article 2026/2/28 21:39:59

  最近在开发一个物业管理软件，其中用到bootstrap 的模态框。同时需要获取表格数据。用传统的方法，本人不想用，考虑到bootstrap应该有获取表格数据的方法，结果发现要想实现获取表格数据功能，需要通过bootstrap的插件实现：bootstrap table，地址：https://bootstrap-table.com/

登录网站并大体浏览一下数据，抱着急不可耐的心情，抓紧测试一下，该物业软件我用的是asp.net mvc 开发的，当然也是在该环境下测试啦。代码如下：

    <!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><script src="https://www.itxst.com/package/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"></script><link href="https://www.itxst.com/package/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" /><link href="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.css" rel="stylesheet" /><script src="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.js"></script><title>bootstrap table getData在线例子</title><style>.table-demo {width: 80%;margin: 30px auto 0px auto;}.titles {float: right;clear: both;}</style></head><body><div id="toolbar"><button onclick="getData()">获取数据</button></div><div class="table-demo"><table id="table"></table></div><script>//设置需要显示的列var columns = [{field: "Id",title: 'ID'}, {field: 'Car',title: '品牌'}, {field: 'StockNum',title: 'Num'}];//需要显示的数据var data = [{Id: 1000,Car: '本田',StockNum: '1'}, {Id: 1002,Car: '丰田',StockNum: '2'}, {Id: 1003,Car: '宝马',StockNum: '3'}, {Id: 1004,Car: '别克',StockNum: '4'}];//bootstrap table初始化数据$('#table').bootstrapTable({toolbar: "#toolbar",columns: columns,data: data,pageSize: 2,pagination: true});function getData() {var data = $('#table').bootstrapTable('getData', { useCurrentPage: true, includeHiddenRows: true });alert(JSON.stringify(data));}</script></body>
</html>

运行，结果出现如下问题：

反复运行都不行，后来启用vscode编辑器。把代码贴上去，经过测试，发现ok，上述问题消失，所以，考虑是asp.net mvc环境问题。初步考虑是js干扰问题，因为我测试使用的asp.net mvc默认环境，而该默认环境已经引入了一些js，如jquery.js  bootstrap.js等比较多的js脚本。所以果断干掉它，在原来环境基础上增加了如下代码，排除干扰：

@{//清除环境干扰Layout = null;
}

那么，排除干扰后的代码如下：

@{//清除环境干扰Layout = null;
}<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><script src="https://www.itxst.com/package/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"></script><link href="https://www.itxst.com/package/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" /><link href="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.css" rel="stylesheet" /><script src="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.js"></script><title>bootstrap table getData在线例子</title><style>.table-demo {width: 80%;margin: 30px auto 0px auto;}.titles {float: right;clear: both;}</style></head><body><div id="toolbar"><button onclick="getData()">获取数据</button></div><div class="table-demo"><table id="table"></table></div><script>//设置需要显示的列var columns = [{field: "Id",title: 'ID'}, {field: 'Car',title: '品牌'}, {field: 'StockNum',title: 'Num'}];//需要显示的数据var data = [{Id: 1000,Car: '本田',StockNum: '1'}, {Id: 1002,Car: '丰田',StockNum: '2'}, {Id: 1003,Car: '宝马',StockNum: '3'}, {Id: 1004,Car: '别克',StockNum: '4'}];//bootstrap table初始化数据$('#table').bootstrapTable({toolbar: "#toolbar",columns: columns,data: data,pageSize: 2,pagination: true});function getData() {var data = $('#table').bootstrapTable('getData', { useCurrentPage: true, includeHiddenRows: true });alert(JSON.stringify(data));}</script></body>
</html>

重新运行，一切ok！

在此，感谢IT小书童    bootstrap table getData获取表格数据的方法 - itxst.com 部分代码来自该在线调试工具，在此感谢作者无私分享。

上述网站是比较好的一个在线测试工具网站。非常好用

bootstrap table getData获取表格数据的方法 - itxst.com  也请大家参考！

相关文章：

bootstrap 表格插件bootstrap table 的使用经验谈！

最近在开发一个物业管理软件&#xff0c;其中用到bootstrap 的模态框。同时需要获取表格数据。用传统的方法&#xff0c;本人不想用&#xff0c;考虑到bootstrap应该有获取表格数据的方法&#xff0c;结果发现要想实现获取表格数据功能&#xff0c;需要通过bootstrap的插件实现…...

编程日记 2026/2/21 23:06:32

Spring Boot框架识别

1. 通过icon图标进行识别 2、如果 web 应用开发者没有修改 SpringBoot Web 应用的默认 4xx、5xx 报错页面&#xff0c;那么当 web 应用程序出现 4xx、5xx 错误时&#xff0c;会报错如下图&#xff1a; 其他页面 工具一把梭哈...

编程日记 2026/2/7 0:54:49

【MySQL】【已解决】Windows安装MySQL8.0时的报错解决方案

一、引言 先说一些没用的话&#xff0c;据说安装MySQL是无数数据库初学者的噩梦&#xff0c;我在安装的时候也是查了很多资料&#xff0c;看了很多博客&#xff0c;但是很多毕竟每个人的电脑有各自不同的情况&#xff0c;大家的报错也不尽相同&#xff0c;所以也是很长时间之后…...

编程日记 2026/2/20 20:15:18

基于linux平台的C语言入门教程（7）类型转换

文章目录 1. 什么是类型转换&#xff1f;2. 隐式类型转换隐式类型转换的规则&#xff1a; 3. 显式类型转换显式类型转换的语法&#xff1a; 4. 示例代码代码解析&#xff1a;输出结果&#xff1a; 5. 常见问题问题 1&#xff1a;隐式类型转换会导致数据丢失吗&#xff1f;问题 …...

编程日记 2026/2/1 5:10:35

MES汽车零部件制造生产监控看板大屏

废话不多说&#xff0c;直接上效果 预览效果请在大的显示器查看&#xff0c;笔记本可能有点变形 MES汽车零部件制造生产监控看板大屏 纯html写的项目结构如下 主要代码分享 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UT…...

编程日记 2026/2/23 19:01:01

晶鑫股份迈向敏捷BI之路，永洪科技助力启程

数据驱动的时代&#xff0c;每一次技术的创新和突破都在为企业的发展注入新的动力。而敏捷性也不再是选择&#xff0c;是企业生存与发展的必要条件。作为连续5年获得中国敏捷BI第一名的永洪科技&#xff0c;通过不断地在数据技术领域深耕细作&#xff0c;再次迎来了行业内的关注…...

编程日记 2026/2/24 8:24:28

Browser Use Web UI 本地部署完全指南：从入门到精通

文章目录 引言一、项目概述1.1 核心功能1.2 技术特点 二、环境准备2.1 系统要求2.2 必要工具 三、详细部署步骤3.1 获取项目代码3.2 配置 Python 环境3.3 安装项目依赖3.4 环境配置3.5 启动应用 四、DeepSeek-V1 模型配置4.1 基础配置 五、执行Browser Use六、故障排查指南6.1 …...

编程日记 2026/2/15 16:35:35

Java单例模式、懒汉模式、饿汉模式和懒加载

好的&#xff01;我们来详细讲解单例模式、懒汉模式、饿汉模式和懒加载&#xff0c;争取让你看完就懂&#xff01; &#x1f7e6; 一、单例模式&#xff08;Singleton Pattern&#xff09; 定义&#xff1a;确保一个类只有一个实例&#xff0c;并提供一个全局访问点。 应用场…...

编程日记 2025/12/19 20:18:10

Linux 内核源码阅读——ipv4

Linux 内核源码阅读——ipv4 综述 在 Linux 内核中&#xff0c;IPv4 协议的实现主要分布在 net/ipv4/ 目录下。以下是一些关键的源文件及其作用&#xff1a; 1. 协议栈核心 net/ipv4/ip_input.c&#xff1a;处理接收到的 IPv4 数据包&#xff08;输入路径&#xff09;。net…...

编程日记 2026/2/18 22:39:43

nginx5天时间从0到熟练掌握学习计划

要在 5 天内熟练地在项目中使用 Nginx&#xff0c;需要制定一个高效的学习计划&#xff0c;重点学习 Nginx 的核心功能和实际应用。以下是一个详细的学习计划&#xff0c;帮助你从零开始掌握 Nginx。 学习目标 掌握 Nginx 的基本概念和安装方法。能够配置 Nginx 托管静态文件、…...

编程日记 2025/9/25 9:43:35

宝塔平替！轻量级开源 Linux 管理面板 mdserver-web

本文首发于只抄博客&#xff0c;欢迎点击原文链接了解更多内容。 前言 想必很多人刚接触 Linux 云服务器的时候都听过或者用过宝塔面板&#xff0c;对于小白来说&#xff0c;使用面板大大降低了服务器运维的难度&#xff0c;一键安装 LNMP 环境就可以建站了&#xff0c;像是 N…...

编程日记 2026/2/21 16:11:29

蓝桥杯 劲舞团

问题描述 小蓝最近迷上了一款名为 “劲舞团” 的游戏。 在游戏中&#xff0c;只要按照给出的键位提示依次按出对应的键位&#xff0c;游戏人物便可以跟随节奏跳舞。 对于连续的 K 次正确敲击&#xff0c;如果任意连续两次敲击之间的时间间隔都小于等于 1 秒&#xff08;即 1…...

编程日记 2026/2/13 15:29:27

基于springboot+vue的网络海鲜市场

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…...

编程日记 2026/2/28 0:59:56

QT开发(6)--信号和槽

这里写目录标题 1. 信号和槽概述信号的本质槽的本质 2. 信号和槽的使用2.1 连接信号和槽2.2 文档查询 3.自定义信号和槽3.1 自定义槽3.2 自定义信号3.3 带参数的信号和槽 4. 信号和槽的断开 1. 信号和槽概述 在Qt中&#xff0c;⽤⼾和控件的每次交互过程称为⼀个事件。⽐如&quo…...

编程日记 2026/2/13 16:24:39

Linux部署DHCP服务脚本

#!/bin/bash #部署DHCP服务 #userli 20250319#检查是否为root用户 if[ "$USER" ! "root" ] thenecho "错误&#xff1a;非root用户&#xff0c;权限不足&#xff01;"exit 0 fi#配置网络环境 read -ep "请给本机配置一个IP地址(不…...

编程日记 2026/2/23 10:05:44

Dervy数据库

Derby 和 Sqlite 数据库都是无需安装的数据库 Derby 和 Sqlite 数据库的配置与使用_derby sqlite-CSDN博客 Derby数据库简明教程_原味吐司-腾讯云---开发者社区 下载 对于jdk1.8及以上 Apache Derby 10.14.2.0 Release 进入bin 找到 启动服务端 进入bin目录 实际上是启…...

编程日记 2026/2/22 9:42:35

Pythonic编程设计风格解析

Python 作为一种“优雅”、“简洁”、“明确”的编程语言&#xff0c;自诞生以来便以其极强的可读性和简洁的语法风靡全球。然而&#xff0c;真正掌握 Python 并不仅仅是会写 Python 代码&#xff0c;更在于是否写出了Pythonic 风格的代码。什么是 Pythonic&#xff1f;Guido v…...

编程日记 2026/2/18 20:23:15

优化 SQL 语句方向和提升性能技巧

优化 SQL 语句是提升 MySQL 性能的关键步骤之一。通过优化 SQL 语句，可以减少查询时间、降低服务器负载、提高系统吞吐量。以下是优化 SQL 语句的方法、策略和技巧： 一、优化 SQL 语句的方法 1. 使用 EXPLAIN 分析查询 作用：查看 SQL 语句的执行计划，了解查询是如何执行的…...

编程日记 2025/7/20 3:54:59

Json的应用实例——cad 二次开发c#

以下是一个使用AutoCAD C#.NET API实现你需求的示例代码&#xff0c;代码实现了提示用户选择一个实体&#xff0c;将一些字符串变量及其对应的值组成JSON格式数据存储到实体的扩展数据&#xff08;XData&#xff09;中&#xff0c;并在弹出窗口中显示该实体的所有扩展数据信息。…...

编程日记 2026/2/14 2:03:20

[AI速读]CHISEL vs. SystemVerilog：用RISC-V核心对比两种硬件设计语言

在硬件设计领域，选择合适的语言对开发效率、维护成本和最终性能都至关重要。最近，一项研究对比了两种硬件描述语言——CHISEL（基于Scala的嵌入式语言）和传统的SystemVerilog，它们分别实现了同一款RISC-V核心（SweRV-EL2）。以下是关键发现和结论。 为什么选择CHISEL？ CHI…...

编程日记 2025/9/21 4:42:56

颠覆者的困局：解构周鸿祎商业哲学中的“永恒战争”

引言&#xff1a;被误解的破坏者 在北京海淀区知春路银谷大厦的某间会议室里&#xff0c;周鸿祎用马克笔在白板上画出一个巨大的爆炸图案——这是2010年360与腾讯开战前夜的战术推演场景。这个充满硝烟味的瞬间&#xff0c;恰是《颠覆者》精神内核的完美隐喻&#xff1a;在中国…...

编程日记 2026/1/25 16:26:24

免费送源码：Java+springboot+MySQL 房屋租赁系统小程序的设计与实现 计算机毕业设计原创定制

目 录 摘要 1 1 绪论 1 1.1选题意义 1 1.2开发现状 1 1.3springboot框架介绍 1 1.4论文结构与章节安排 1 2 房屋租赁系统小程序系统分析 3 2.1 可行性分析 3 2.1.1 技术可行性分析 3 2.1.2 经济可行性分析 3 2.1.3 法律可行性分析 3 2.2 系统功能分析 3 2.2.1 功…...

编程日记 2026/2/13 17:25:32

【计算机网络原理】选择题+简答题

文章目录 选择题网络基础IP网络拓扑 OSI七层模型协议HDLCTCP/IP 交换技术网络安全数字签名 算法与策略 简答题UDPTCP 选择题 网络基础 下列域名中&#xff0c;属于国际顶级域名的是&#xff08;&#xff09; A. us B. tom C. edu D. int 下列关于光纤传输介质的叙述中错误的是…...

编程日记 2025/7/22 5:31:35

个人学习编程(3-22) leetcode刷题

连续子数组&#xff1a;&#xff08;难&#xff09; 示例 1: 输入: nums [0,1] 输出: 2 说明: [0, 1] 是具有相同数量 0 和 1 的最长连续子数组。 示例 2: 输入: nums [0,1,0] 输出: 2 说明: [0, 1] (或 [1, 0]) 是具有相同数量0和1的最长连续子数组。 需要理解的知识&a…...

编程日记 2026/2/26 7:46:56

基于python+django的酒店预定网站-酒店管理系统源码+运行步骤+课程学习

该系统是基于pythondjango开发的酒店预定管理系统。适用场景&#xff1a;大学生、课程作业、毕业设计。学习过程中&#xff0c;如遇问题可在github给作者留言。共同学习技术 演示地址 前台地址&#xff1a; http://hotel.gitapp.cn 后台地址&#xff1a; http://hotel.gitapp…...

编程日记 2026/2/18 23:59:52

Spring 6: 3容器-Ioc

3、容器&#xff1a;IoC IoC 是 Inversion of Control 的简写&#xff0c;译为“控制反转”&#xff0c;它不是一门技术&#xff0c;而是一种设计思想&#xff0c;是一个重要的面向对象编程法则&#xff0c;能够指导我们如何设计出松耦合、更优良的程序。 Spring 通过 IoC 容…...

编程日记 2026/2/25 13:09:01

【漫话机器学习系列】154.岭回归（Ridge Regression）

岭回归&#xff08;Ridge Regression&#xff09;详解 1. 引言 岭回归&#xff08;Ridge Regression&#xff09;是一种改进的线性回归方法&#xff0c;它通过引入正则化项来解决普通最小二乘法&#xff08;OLS, Ordinary Least Squares&#xff09;可能遇到的多重共线性问题…...

编程日记 2026/2/16 12:49:18

wsl2配置xv6全解（包括22.04Jammy）

文章目录 获取xv6源代码Ubuntu20.04 Version安装指令成功测试参考MIT2021年官方文档 24.04 Version安装指令成功测试参考MIT2024年官方文档 Ubuntu 22.04没有官方文档&#xff1f; 配置大体流程1. 卸载原本qemu&#xff08;如果之前安装了&#xff09;2. clone qemu官方源代码&…...

编程日记 2026/2/27 16:13:11

并查集——108. 冗余连接

108. 冗余连接 题目描述 有一个图，它是一棵树，他是拥有 n 个节点（节点编号1到n）和 n - 1 条边的连通无环无向图（其实就是一个线形图），如图： 现在在这棵树上的基础上，添加一条边（依然是n个节点，但有n条边），使这个图变成了有环图，如图： 先请你找出冗余边，删除后…...

编程日记 2026/2/24 19:22:45

初识XXL-JOB分布式任务调度

XXL-JOB架构分析 设计思想 将调度行为抽象形成"调度中心"公共平台&#xff0c;而平台自身并不承担业务逻辑&#xff0c;"调度中心"负责发起调度请求。 将任务抽象成分散的JobHandler&#xff0c;交由"执行器"统一管理&#xff0c;"执行器…...

编程日记 2026/2/25 1:49:07