jquery datatable reload on button click

在 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

  • 4年前
    5年前
  •