Menu
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>
961
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
184
answered May 16 '26 22:05
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
