Bootstrap table showing message "loading in progress, please be patient"

I'm having an issue trying to load data from an API into a bootstrapTable but it seems to be stuck on "loading..". Can anyone help me figure out what's wrong with my code?

Thank you in advance for your assistance!

<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)
        });
    });
});

Here are the initial files I included:

    <link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ffdf0f0ebecebedfeefb2ebfefdf3fadfaeb1aeaab1aa">[email protected]</a>/dist/bootstrap-table.min.css">
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e98b86869d9a9d9b8899c49d888b858ca9d8c7d8dcc7dc">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="593b36362d2a2d2b3829742d383b353c196877686c776c">[email protected]</a>/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="85e7eaeaf1f6f1f7e4f5a8f1e4e7e9e0c5b4abb4b0abb0">[email protected]</a>/dist/extensions/export/bootstrap-table-export.min.js"></script>
javascriptjquerycssjsonajax

Answer №1

Simply set up the table with the data-url included and remove 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>

Answer №2

Appreciate the help everyone, turns out the data had already been converted from a JSON string to a JavaScript object. My mistake!

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Pressing enter to submit a form when the submit button is not visible is functional in Firefox, but has no effect in Chrome

There is a form with various input fields and a hidden submit button (hidden using style="display:none"). Interestingly, in Firefox, pressing the return key while an input field is focused automatically submits the form. However, in Chrome, hitting retur ...

javascripthtmlcssformsgoogle-chrome

Tips for concealing a Div in an HTML document with the help of Angular

I need a solution to hide a div that contains only titles, while the div with the actual content is located in a different section <div> <b>Delivery Info\</b> <div class="custom-control">Delivery ID: </div ...

javascripthtmlangularhide

Display search results in Rails without needing to refresh the entire tab

I have a search functionality incorporated within a Bootstrap tab, and I aim to display the search results dynamically without reloading the entire page, specifically within the tab itself. Despite adding 'remote: true' to the form_tag and incor ...

javascriptjqueryruby-on-railsruby

Guide to switch background image using querySelector

I am currently trying to figure out how to set the background image of a div block by using querySelector. I have attempted various methods in my test code below, but unfortunately none seem to be working. Can someone please provide assistance? <!DOC ...

javascriptcsshtmljquery-selectorsbackground-image

Troubleshooting the ThreeJs THREE.Mesh position problem

As a newcomer to three.js, I am exploring the three.js libraries and trying to understand how they work. I have successfully rendered a sphere on the screen, but I am having trouble figuring out what exactly the .position member of the sphere is referencin ...

javascriptthree.js

"Repeating SignalR Messages: Issue of Duplication when Stopping and Restarting

Whenever I stop and start the connection, messages sent to the client by the hub are duplicated. If I follow this sequence: $.connection.hub.stop() $.connection.hub.start() {...} and a message is sent from the server hub to the client, it is initially re ...

c#javascriptasp.netsignalr

Using JSP and Ajax to dynamically populate a dropdown menu based on the user's selection

I am currently working on a project where I need to create a dropdown list that will retrieve all product categories from the database and populate them. Another dropdown list should display the product names based on the category selected by the user. Whi ...

ajaxjsp

Get 5 photos from the provided URLs

Currently, I am facing a challenge where I need to download 5 images from the JSON response. I have successfully obtained the URLs of the images and can download an image if I manually input the image location in the code. How can I modify the code to dow ...

javaandroidjsonandroid-image

Transforming a list into a pandas dataframe by filtering values that meet specific conditions

After retrieving data from an API using the code below, my goal is to select the necessary information and convert it into a dataframe. import requests import pandas as pd trait_type_responses= [] for t_id in range(1,10): url=f"https://api.open ...

pythonjsonpandasdataframeapi

Switch the contenteditable HTML attribute in a dynamically generated table using PHP

Despite finding numerous articles and solutions, my code still refuses to work. What could I be overlooking? Below is a snippet of the code where the crucial part is marked at the comment '! HERE') <!-- Table with grades --> <table clas ...

javascriptphpjquerybootstrap-4

Sequelize: Confusion caused by overlapping names for attribute 'playlist' and association 'playlist'?

Encountered an error while using node.js, Sequelize, and MariaDB. The error message states a naming collision between attribute 'playlist' and association 'playlist' on model playlist_entry. Unsure about how to resolve this issue. Er ...

javascriptnode.jssequelize.jsmariadb

Adjusting the Image Size in Web Browser Control to Match Device Width on WP8

I am currently working on a WP8 application that utilizes the WebBrowser control to display images. My goal is to have the image width match the width of the phone exactly, but I am encountering some difficulties in achieving this. My approach involves ob ...

c#htmlcsswindows-phone-8

Encountering an error "[$rootScope:inprog]" while using Angular select with ngModel

I'm still learning my way around Angular, but I have a basic understanding. Right now, I'm working on assigning access points to a building using a <select> element. I've created a simple controller for this task, but it's not fun ...

javascriptangularjs

Guide for animating individual mapped elements in react-native?

After mapping an object array to create tag elements with details, I added an animation for the tags to zoom in on render. However, I wanted to take it further and animate each tag individually, sequentially one after the other. This appears to be a common ...

javascriptreactjsreact-nativereact-animated

Keep Variable-Height Element Corners Rounded to Perfection

I am facing a challenge with creating buttons that have perfectly rounded corners. The button is 50px high and the border radius is set to 25px, resulting in a perfect half-circle on each side of the button: It's pretty straightforward to achieve thi ...

css

What steps should I follow to include a JSON Request file in my project?

I've been working on integrating the Google Translation API into my project and came across some helpful information in the documentation here. According to the instructions, I need to Follow these steps to create a JSON request file with specific ...

androidjsongoogle-api

What is the best way to horizontally replace buttons in a Navbar?

I'm currently new to coding and I'm attempting to create a navbar using Bootstrap. However, I'm struggling to align the buttons horizontally. I've attempted using class="float-right" on every element without success. I even tried using ...

htmlcssbootstrap-4

Is there a way to display multiple images in a JSON message object?

If you're looking for a fun way to generate random dog images, then check out my DogAPI image generator! Simply enter a number between 1-50 into the form text box, hit send, and watch as it displays that amount of random dog photos. I'm almost t ...

javascriptjqueryhtmljsonobject

I am experiencing a problem where my AJAX responses are being downloaded instead of being loaded into the success data

I'm fairly new to using JQuery. I've been trying to send an AJAX request (File Upload) to a WEB API (ASP.NET MVC), but for some reason, my responses are downloading as JSON files instead of loading into the success data. Below is the code snippe ...

javascriptjqueryasp.netajax

Guide to creating a tab dropdown in Bootstrap version 2

Can someone guide me on how to make my Bootstrap tab dropdown? Here is the code snippet I am currently using in MVC. HTML <div id="tabs" style="border: 0px; width:100%;"> <ul id="uTabs"> <li><a href="#tabs-1">< ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-2