添加新行后刷新Bootstrap-table
是指在使用Bootstrap-table插件时，向表格中添加新的数据行后，需要手动刷新表格以显示新的数据行。
Bootstrap-table是一个基于Bootstrap框架的强大的表格插件，它提供了丰富的功能和灵活的配置选项，可以方便地展示和操作数据表格。
要实现添加新行后刷新Bootstrap-table，可以按照以下步骤进行操作：
- 在HTML页面中引入Bootstrap-table插件的相关文件，包括CSS和JavaScript文件。
- 在HTML页面中创建一个表格，并设置相应的ID和class。
- 使用JavaScript代码初始化Bootstrap-table插件，并配置相关的参数，如表格的列定义、数据源等。
- 在添加新行的操作中，通过JavaScript代码向数据源中添加新的数据行。
- 调用Bootstrap-table插件提供的方法，手动刷新表格，以使新的数据行显示出来。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap-table示例</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.min.css">
</head>
<body>
<table id="myTable" class="table">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="age">Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</tbody>
</table>
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.min.js"></script>
<script>
$(document).ready(function() {
$('#myTable').bootstrapTable({
columns: [{
field: 'id',
title: 'ID'
}, {
field: 'name',
title: 'Name'
}, {
field: 'age',
title: 'Age'
}]
});
});
function addNewRow() {
var newRow = {
id: 3,
name: 'Mike',
age: 35
};
$('#myTable').bootstrapTable('append', newRow);
$('#myTable').bootstrapTable('refresh');
}
</script>
<button onclick="addNewRow()">添加新行</button>
</body>
</html>在上述示例代码中，通过调用bootstrapTable('append', newRow)方法向表格中添加新的数据行，然后调用bootstrapTable('refresh')方法手动刷新表格。
这样，当点击"添加新行"按钮时，就会向表格中添加一行数据，并刷新表格以显示新的数据行。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/tpns
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe
相关·内容
现在，我正在向该表中动态添加一个新行 $('table#orders').append('<tr><td>Some Date</td></tr>'); 替换行后，不会显示新添加行的详细信息视图图标/按钮尝试刷新后，将显示详细信息视图图标，但不会显示新添加的行的内容，而是显示旧行 $('tab
浏览 105提问于2021-07-28得票数 0
我尝试用以下命令安装bootstrap表 yarn add bootstrap-table 在application.js中，我得到了： import 'bootstrap-table/dist/bootstrap-table.min.js'
import 'bootstrap-table/dist/locale/bootstrap-table-de-DE.min.js' 在backend.sass中： @import '~boots
浏览 63提问于2021-09-29得票数 0
回答已采纳
1回答
例如，我使用bootstrap-table分页。我现在在第五页。我有一个要删除的操作。他是bootstrap的典型代表。如果我确认删除，他将发送ajax请求。成功后，我应该刷新我的页面，当我执行刷新时，页面返回到第一个页面，这根本不符合我们的经验，我希望找到一些解决方案，感谢在这里输入图像描述
浏览 3提问于2020-02-17得票数 0
我正在使用bootstrap-table，并希望为刷新按钮添加我的自定义处理程序，而不是运行默认处理程序。我怎么能做到这一点？
浏览 1提问于2015-05-06得票数 0
6回答
我在JScrollPane中有一个JTable。在调用应该填充表的函数之后，我看不到任何更改！我尝试过table.repaint()，model.fireTableDataChanged()，可能还有其他一些我不记得了的东西--都不起作用。我做错了什么？？public static void fillVodicTable(JTable table){
table.se
浏览 3提问于2012-03-26得票数 1
回答已采纳
顺便说一下，我试图在我的application.js和application.scss文件中添加如下内容： application.js import 'bootstrap'require("leaflet");
//= require bootstrap-table</em
浏览 25提问于2020-11-07得票数 0
我有一个问题，需要能够用类.this_table隐藏所有其他表的(单击)，并隐藏最接近的父表div .bootstrap-table。到目前为止，我能够隐藏所有其他表，但是父div仍然存在。我尝试了几种添加.closest('.bootstrap-table')的变体，但我无法让它起作用。table-javascript-2">link2</a>
<a class="report" data-id="table-javascript-3"
浏览 3提问于2018-01-04得票数 0
当我单击页面上的任何位置时，如果没有刷新页面，我希望在wenzhixin引导表中只获得一个空搜索框。
浏览 0提问于2018-11-19得票数 1
回答已采纳
来自数据库的新值应该只添加到新列中，而不更新其他列。因此，每次刷新后，您可以在新列中看到新状态，并将其与旧状态进行比较。一行的示例(在10分钟内刷新-因此刷新后您有多一列)：刷新后：下一次刷新</e
浏览 4提问于2013-07-22得票数 0
1回答
我现在的问题是每次我编辑的行数据在对列进行排序后都会消失。如何永久编辑行，即使我对列排序？name', search: true, }
浏览 3提问于2017-08-06得票数 0
1回答
我正在使用在中找到的库CSV来尝试编写一个函数，该函数将为我导出一个类。下面是我的示例类：{ public string SerialNumber { get; set; } private string InputHz { get; set; } private st
浏览 2提问于2018-07-02得票数 0
回答已采纳
3回答
问题是，如果我在这个垫子对话框中添加了游戏，那么它将被成功地添加，但只有在手动刷新将在mat表中更新的家庭组件之后才能成功添加。我需要在没有任何手动刷新的情况下对垫子进行更新home.component.html
浏览 6提问于2020-09-19得票数 1
2回答
我可以在代码中从数据库中添加、删除或编辑行。但是，我无法刷新网格。我的意思是，当我在网格视图中添加新行时，它不会出现在其中。在我重新编译代码之后，它就出现了。如何刷新网格视图？sqlCmd.ExecuteNonQuery() End If此外，我还尝试编写一个刷新函数，在调用每个按钮时刷新网格视图。
浏览 0提问于2016-03-22得票数 0
回答已采纳
1回答
响应表在填充时松开响应。
、、、
我有一个JQuery移动响应表。当调整浏览器窗口的大小时，会出现更多/更少的列，因此一切都正常。 <thead> <th data-priority="6">customer ID</th>
<th>Customer
浏览 2提问于2014-10-06得票数 2
回答已采纳
单独的线程会将新行添加到DataTable，但这些行不会显示在DataGrid中。
我想我做错了什么。你们谁能告诉我如何在DataGrid中显示DataTable，同时以编程方式添加新行？
浏览 3提问于2012-10-24得票数 0
每当我调用setRowData()来添加超过网格div可以显示的行数的行时，除非滚动，否则一些行不会添加到DOM中。即使我滚动到网格的底部，它们也不会出现。如果我调整网格的大小，这些缺失的行就会神奇地出现。我试着从setTimeout调用refreshView()，但不起作用。是否有在所有行上强制渲染的选项？或者至少让它们在我滚动的时候出现？
浏览 7提问于2017-05-04得票数 0
3回答
我的代码片段如下所示：for i in xrange(10): status = status + chr(8)*(len(status)+1) print statusprint statusprint status,
现在，当我在print status之后使用逗号时，print只向标准输出输出一次。例如，在循环最后一次迭代之后，如果我没有将逗号放在print status后面，那么每次调用print
浏览 5提问于2011-03-05得票数 2
回答已采纳
1回答
用户可以提交他们的位置，这将在数据库中添加一个新行，并在地图上添加一个新标记。
在Chrome和FF中，新标记在表单提交后显示，但当用户在IE中提交表单时，即使在手动刷新页面后，也不会显示新标记。如何强制IE完全刷新页面上的所有内容？
浏览 0提问于2011-08-24得票数 0
一旦我填充表，我从另一个名为responsive table的指令中调用tablesaw“刷新”事件，它使表完全响应，并且一切都很好。下面是我的HTML以供参考。
this)
浏览 14提问于2015-01-20得票数 3
5回答
在我向JTable中添加新行之后。写入的信息将写入txt文件，但我的JTable没有显示最后的原始数据。但如果我关闭程序，并再次运行它，表中的信息就会显示出来。那么，有没有一种方法可以在不关闭应用程序并再次运行的情况下刷新JTable中的数据呢？
浏览 0提问于2014-02-14得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
