在 jQuery DataTable 中,可以使用
ajax.reload()
方法来重新加载表格数据。要在按钮单击事件中触发重新加载,可以使用 jQuery 的
click()
方法和
ajax.reload()
方法的结合。
下面是一个示例代码,当用户单击按钮时,它将触发表格的重新加载:
<!DOCTYPE html>
<meta charset="UTF-8">
<title>jQuery DataTable Reload on Button Click</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.css"/>
</head>
<table id="example" class="display" style="width:100%">
<thead>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</thead>
<tbody>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tbody>
</table>
<button id="reloadBtn">Reload</button>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.24/datatables.min.js"></script>
<script>
$(document).ready(function() {
var table = $('#example').DataTable({
ajax: {
url: 'data.json',
dataSrc: ''
columns: [
{ data: 'name' },
{ data: 'position' },
{ data: 'office' },
{ data: 'age' },
{ data: 'start_date' },
{ data: 'salary' }
$('#reloadBtn').click(function() {
table.ajax.reload();
</script>
</body>
</html>
在此示例中,我们创建了一个 table
元素,然后使用 DataTable 初始化了它。在初始化期间,我们指定了一个 ajax
对象,该对象包含要获取数据的 URL。在单击按钮时,我们使用 click()
方法来绑定一个单击事件处理程序,该处理程序触发表格的重新加载。在重新加载时,DataTable 将使用先前指定的 URL 发出 AJAX 请求并更新表格数据。
请注意,这里的示例假定您已经有一个能够正确返回 JSON 格式数据的 URL。如果您还没有,请先根据您的需求创建一个后端 API,并将其 URL 替换为上面示例代码中的 data.json
。