如何防止数据表在ajax获取表之前无法加载？[关闭]

问：

我有一个 html 表，显示来自 Mikrotik 路由器的数据，表数据是使用 ajax 从特定路由器获取的，因为该应用程序支持多个路由器，当获取数据时表会太长，所以我想添加 datatable，以便它被安排在其他也可以搜索。

<div class="table-responsive">
      <div class="nav-tabs-custom">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#tab_1" data-toggle="tab">Interface Status</a></li>
          <li><a href="#tab_2" data-toggle="tab">Hotspot Online Users</a></li>
          <li><a href="#tab_3" data-toggle="tab">PPPoE Online Users</a></li>
        </ul>
        <div class="tab-content">
          <div style="overflow-x:auto;" class="tab-pane active" id="tab_1">
            <div class="box-body no-padding" id="traffic-panel">
              <table class="table table-bordered" id="traffic-table">
                <thead>
                  <tr>
                    <th class="custom-class">Interface Name</th>
                    <th class="custom-class">TX (bytes Out)</th>
                    <th class="custom-class">RX (bytes In)</th>
                    <th class="custom-class">Status</th>
                  </tr>
                </thead>
                <tbody id="interface-status-table-body"></tbody>
              </table>
            </div>
          </div>
          <!-- /.tab-pane -->
          <div class="tab-pane" style="overflow-x:auto;" id="tab_2">
            <table class="table table-bordered" id="hotspot-table">
              <thead>
                <tr>
                  <th class="custom-class">Username</th>
                  <th class="custom-class">IP Address</th>
                  <th class="custom-class">Uptime</th>
                  <th class="custom-class">Server</th>
                  <th class="custom-class">Mac Address</th>
                  <th class="custom-class">Session Time Left</th>
                  <th class="custom-class">Upload (RX)</th>
                  <th class="custom-class">Download (TX)</th>
                  <th class="custom-class">Total Usage</th>
                  <th class="custom-class">Action</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
          <!-- /.tab-pane -->
          <div style="overflow-x:auto;" class="tab-pane" id="tab_3">
            <table class="table table-bordered" id="ppp-table">
              <thead>
                <tr>
                  <th class="custom-class">Username</th>
                  <th class="custom-class">IP Address</th>
                  <th class="custom-class">Uptime</th>
                  <th class="custom-class">Service</th>
                  <th class="custom-class">Caller ID</th>
                  <th class="custom-class">RX (bytes In)</th>
                  <th class="custom-class">TX (bytes Out)</th>
                  <th class="custom-class">Action</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
          <br>
        </div>
      </div>
    </div>


<script>
  function disconnectUser(userType, username) {
    var disconnectUrl = '{$_url}plugin/disconnect_user';
   $.ajax({
   url: disconnectUrl,
   method: 'POST',
   data: {
     router: '{$router}',
     username: username,
     userType: userType // Include userType as a parameter
    },
    dataType: 'json',
    success: function (data) {
     console.log('User disconnected successfully');
    // Perform any additional actions after successful disconnection
    },
    error: function (xhr, status, error) {
    console.log('AJAX Error: ' + error);
    // Handle the error case
     }
  });
}

  function updateTable(tableId, userType, data) {
    var table = $('#' + tableId + ' tbody');
    table.empty();

    $.each(data, function (index, user) {
      var row = '<tr class="custom-class">' +
        '<td>' + user.username + '</td>' +
        '<td>' + user.address + '</td>' +
        '<td>' + user.uptime + '</td>';

      if (userType === 'hotspot') {
        row +=
          '<td>' + user.server + '</td>' +
          '<td>' + user.mac + '</td>' +
          '<td>' + user.session_time + '</td>' +
          '<td>' + user.rx_bytes + '</td>' +
          '<td>' + user.tx_bytes + '</td>' +
          '<td>' + user.total + '</td>';
      } else if (userType === 'pppoe') {
        row +=
          '<td>' + user.service + '</td>' +
          '<td>' + user.caller_id + '</td>'+
          '<td>' + user.bytes_in + '</td>'+
          '<td>' + user.bytes_out + '</td>';
      }

      row += '<td><button class="disconnect-btn" data-username="' + user.username + '">Disconnect</button></td>' +
        '</tr>';

      table.append(row);
    });

    $('.disconnect-btn').off('click').on('click', function () {
  var username = $(this).data('username');
  var userType = '';

  // Find the nearest parent table
  var $parentTable = $(this).closest('.tab-pane');

  // Check the class of the parent table to determine the user type
  if ($parentTable.attr('id') === 'tab_2') {
    userType = 'hotspot';
  } else if ($parentTable.attr('id') === 'tab_3') {
    userType = 'pppoe';
  }

  // Display the confirmation pop-up based on the user type
  if (userType === 'hotspot') {
    var confirmed = confirm('Are you sure you want to disconnect HOTSPOT user ' + username + '?');
  } else if (userType === 'pppoe') {
    var confirmed = confirm('Are you sure you want to disconnect PPPoE user ' + username + '?');
  }

  if (confirmed !== false) {
    // Perform the disconnect action
    disconnectUser(userType, username);
  }
   });
  }

  function updateHotspot() {
    $.ajax({
      url: '{$_url}plugin/get_hotspot_online_users/{$router}',
      method: 'GET',
      dataType: 'json',
      success: function (data) {
        updateTable('hotspot-table', 'hotspot', data);
      },
      error: function (xhr, status, error) {
        console.log('AJAX Error: ' + error);
      }
    });

  }

  function updatePPP() {
    $.ajax({
      url: '{$_url}plugin/get_ppp_online_users/{$router}',
      method: 'GET',
      dataType: 'json',
      success: function (data) {
        updateTable('ppp-table', 'pppoe', data);
      },
      error: function (xhr, status, error) {
        console.log('AJAX Error: ' + error);
      }
    });
  }

  setInterval(function () {
    updateHotspot();
    updatePPP();
  }, 10000);
</script>

<script>
    function updateTraffic() {
        $.ajax({
            url: '{$_url}plugin/mikrotik_get_traffic/{$router}',
            method: 'GET',
            dataType: 'json',
            success: function (data) {
                // Clear the existing table data
                $('#traffic-table tbody').empty();

                // Append the updated data to the table
                $.each(data, function (index, interface) {
                    var row = '<tr class="custom-class">' +
                        '<td>' + interface.name + '</td>' +
                        '<td>' + interface.tx + '</td>' +
                        '<td>' + interface.rx + '</td>' +
                        '<td>' + interface.status + '</td>' +
                        '</tr>';
                    $('#traffic-table tbody').append(row);
                });
              },
              error: function (xhr, status, error) {
                console.log('AJAX Error: ' + error);
              }
        });
    }
   // Update traffic every 5 seconds
    setInterval(updateTraffic, 5000);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
<link href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css" rel="stylesheet"/>

<script>
    $(document).ready(function() {

});

$('#traffic-table').DataTable();
$('#hotspot-table').DataTable();
$('#ppp-table').DataTable();
</script>

上面的代码显示了数据表，但数据没有按预期排序，它显示 0 个结果。

我意识到的是，在ajax加载表之前加载了数据表

我做错了什么？

更新

我也试过这个，它不起作用

function updateHotspot() {
    $.ajax({
      url: '{$_url}plugin/get_hotspot_online_users/{$router}',
      method: 'GET',
      dataType: 'json',
      success: function (data) {
        $('#hotspot-table').DataTable();
        updateTable('hotspot-table', 'hotspot', data);

      },
      error: function (xhr, status, error) {
        console.log('AJAX Error: ' + error);
      }
    });

  }

  function updatePPP() {
    $.ajax({
      url: '{$_url}plugin/get_ppp_online_users/{$router}',
      method: 'GET',
      dataType: 'json',
      success: function (data) {
        $('#ppp-table').DataTable();
        updateTable('ppp-table', 'pppoe', data);
      },
      error: function (xhr, status, error) {
        console.log('AJAX Error: ' + error);
      }
    });
  }