CODEWITHSUNDEEP
javascripthtmljsontwitter-bootstrap
AAA
AAA

Reputation: 2450

Bootstrap Example: Loading data from JSON into a table

I am trying to follow this Bootstrap tutorial here and so far have the following code below. This code seems to load the HTML page OK but it does not load the data in the .json file even though the .json file is in the same directory. I am placing these files on my web server and viewing the page through Chrome but still with an empty table. The console doesn't display anything. How can I get the data1.json data to display in the table and how could I have troublshooted this?

Thank you

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <table data-toggle="table" data-url="data1.json" data-cache="false" data-height="299">
    <thead>
        <tr>
            <th data-field="id">Item ID</th>
            <th data-field="name">Item Name</th>
            <th data-field="price">Item Price</th>
        </tr>
    </thead>
    </table>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Upvotes: 2

Views: 48664

Answers (2)

user2653774
user2653774

Reputation: 21

Late answer but just in case somebody is with this issue. One of the problems of using ajax-like requests is that you need a server. Virtually any server could do, but you cannot get it working on plain filesystem.

Upvotes: 2

handk
handk

Reputation: 71

Bootstrap does not support the table feature you want to use. You have to include Bootstrap Table. Otherwise it won't work. Download Bootstrap table and use it in your code. http://bootstrap-table.wenzhixin.net.cn/getting-started

Upvotes: 7

Related Questions