引导表卡住“正在加载，请稍候”

Posted 2023-05-08

【中文标题】引导表卡住“正在加载，请稍候”

【英文标题】：bootstrap table stuck "loading please wait"

【发布时间】：2021-06-21 16:21:20

【问题描述】：

我正在尝试使用 bootstrapTable 将 API 中的一些数据插入到表中，但我卡在“正在加载..” 我的代码有什么问题？？

非常感谢您的帮助！

<table id="table" data-toggle="table" data- data-ajax="ajaxRequest" data-search="true"
   data-side-pagination="server" data-pagination="true">
<thead>
<tr>
    <th data-field="Country" data-sortable="true">Country</th>
    <th data-field="CountryCode" data-sortable="true">CountryCode</th>
    <th data-field="Confirmed" data-sortable="true">Confirmed</th>
    <th data-field="Deaths" data-sortable="true">Deaths</th>
    <th data-field="Recovered" data-sortable="true">Recovered</th>
    <th data-field="Active" data-sortable="true">Active</th>
    <th data-field="Date" data-sortable="true">Date</th>
</tr>
</thead>

<script>
$.get("https://api.covid19api.com/country/italy?from=2020-03-01T00:00:00Z&to=2020-04-01T00:00:00Z", function (data) 
    $(function () 
        $('#table').bootstrapTable(
            data: JSON.parse(data)
        );
    );
);

我先添加了这些：

    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">
<link href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/extensions/export/bootstrap-table-export.min.js"></script>

【问题讨论】：

也许可以尝试使用fetch API 并确保您收到来自链接的响应？

先检查通过console.log获取响应数据

尝试在get请求回调后移除该函数。可能数据的sope是不可见的。

【参考方案1】：

只需在此处定义带有 data-url 的表并退出 <script>

<table
  data-toggle="table"
  data-url="https://api.covid19api.com/country/italy?from=2020-03-01T00:00:00Z&to=2020-04-01T00:00:00Z"
  data-pagination="true"
  data-search="true">
  <thead>
    <tr>
      <th data-field="Country" data-sortable="true">Country</th>
      <th data-field="CountryCode" data-sortable="true">CountryCode</th>
      <th data-field="Confirmed" data-sortable="true">Confirmed</th>
      <th data-field="Deaths" data-sortable="true">Deaths</th>
      <th data-field="Recovered" data-sortable="true">Recovered</th>
      <th data-field="Active" data-sortable="true">Active</th>
      <th data-field="Date" data-sortable="true">Date</th>
    </tr>
  </thead>
</table>

【参考方案2】：

谢谢大家，数据不再是 JSON 字符串，而是已经是 javascript 对象了……我的错！

$("#table").bootstrapTable(
  data: data,
);