Question posted in
You can find the official documentation here.

bootstrap table stuck "loading please wait" – Jquery ajax

I’m trying to insert some data from an API into a table with bootstrapTable but I’m stuck on "loading.."
What’s wrong in my code??

Many thanks for your help!

<table id="table" data-toggle="table" data-height="460" 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)
        });
    });
});

I’ve added these first:

    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<link href="https://unpkg.com/[email protected]/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/[email protected]/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/extensions/export/bootstrap-table-export.min.js"></script>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks all guys, the data wasn't a JSON string anymore, but already a JavaScript object.. my bad!

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

  2. 0

    Just define the table with the data-url there and quit the <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search