《bootstrap页面_bootstrap页面不刷新更新表格》

一、解决方案简述

在Bootstrap页面中实现不刷新更新表格，可以通过使用Ajax技术来与服务器交互获取数据，并借助JavaScript动态地修改表格内容。这样既能够保证页面布局和样式不变，又能及时更新表格中的数据。

二、思路一：通过按钮触发更新

1. HTML结构

html</p>

<div class="container">
    <button id="updateTableBtn" class="btn btn-primary">更新表格</button>
    <table id="myTable" class="table table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格初始数据 -->
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>20</td>
            </tr>
        </tbody>
    </table>
</div>

<p>

2. JavaScript代码（引入了jQuery库）

javascript
$(document).ready(function(){
$("#updateTableBtn").click(function(){
$.ajax({
url:"getNewData.php",//假设这是获取新数据的服务器端接口
type:"GET",
success:function(data){
// 假设data是返回的新数据，格式为json数组[{id:2,name:'李四',age:25},{...}]
var tbody = $("#myTable tbody");
tbody.empty();//清空原有表格内容
for(var i = 0;i < data.length;i++){
var row = "<tr><td>" + data[i].id + "</td><td>" + data[i].name + "</td><td>" + data[i].age + "</td></tr>";
tbody.append(row);
}
},
error:function(xhr,status,error){
console.log("请求失败：" + error);
}
});
});
});


三、思路二：定时自动更新表格

1. HTML结构与上述类似

2. JavaScript代码

javascript
$(document).ready(function(){
    function updateTable(){
        $.ajax({
            url:"getNewData.php",
            type:"GET",
            success:function(data){
                var tbody = $("#myTable tbody");
                tbody.empty();
                for(var i = 0;i < data.length;i++){
                    var row = "<tr><td>" + data[i].id + "</td><td>" + data[i].name + "</td><td>" + data[i].age + "</td></tr>";
                    tbody.append(row);
                }
            },
            error:function(xhr,status,error){
                console.log("请求失败：" + error);
            }
        });
    }</p>

<pre><code>// 每隔5秒更新一次表格
setInterval(updateTable,5000);

});

这两种思路都可以实现Bootstrap页面不刷新更新表格的功能，根据实际需求可以选择不同的方式。如果需要用户主动触发更新就采用思路一，而如果希望页面自动保持数据则可以使用思路二。