1
Ich bin völlig neu beim Erstellen von Websites und solche Sachen, und ich konnte nichts tun, was sehr einfach sein sollte. Ich möchte eine JSON-Datei im selben Verzeichnis in eine Tabelle laden. Ich habe nach einer Antwort gesucht und nichts scheint für mich zu funktionieren, also muss ich etwas falsch machen.Laden einer JSON-Datei in eine Tabelle mit Bootstrap
Ich fand this die ich versuchte mit, aber nach dem Versuch so viele Dinge konnte ich es nicht zur Arbeit bekommen. In meinem Fall hätte ich data in einer JSON-Datei im selben Verzeichnis.
Meine test.html Datei:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<meta name="description" content="Hello World">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script>
var data =
[
{
"id": 0,
"name": "test0",
"price": "$0"
},
{
"id": 1,
"name": "test1",
"price": "$1"
},
{
"id": 2,
"name": "test2",
"price": "$2"
},
{
"id": 3,
"name": "test3",
"price": "$3"
},
{
"id": 4,
"name": "test4",
"price": "$4"
},
{
"id": 5,
"name": "test5",
"price": "$5"
},
{
"id": 6,
"name": "test6",
"price": "$6"
},
{
"id": 7,
"name": "test7",
"price": "$7"
},
{
"id": 8,
"name": "test8",
"price": "$8"
},
{
"id": 9,
"name": "test9",
"price": "$9"
},
{
"id": 10,
"name": "test10",
"price": "$10"
},
{
"id": 11,
"name": "test11",
"price": "$11"
},
{
"id": 12,
"name": "test12",
"price": "$12"
},
{
"id": 13,
"name": "test13",
"price": "$13"
},
{
"id": 14,
"name": "test14",
"price": "$14"
},
{
"id": 15,
"name": "test15",
"price": "$15"
},
{
"id": 16,
"name": "test16",
"price": "$16"
},
{
"id": 17,
"name": "test17",
"price": "$17"
},
{
"id": 18,
"name": "test18",
"price": "$18"
},
{
"id": 19,
"name": "test19",
"price": "$19"
},
{
"id": 20,
"name": "test20",
"price": "$20"
}
];
$(function() {
$('#table').bootstrapTable({
data: data
});
});
</script>
</head>
<body>
<header>
<div class="jumbotron">
<div class="container">
<h3>Testing table in bootstrap</h3>
</div>
</div>
</header>
<div class="container">
<div class="row">
<table id="table" class="table table-bordered">
<thead>
<tr class="info">
<th data-field="id">First name</th>
<th data-field="name">Last name</th>
<th data-field="price">Age</th>
</tr>
<thead>
</table>
</div>
</div>
<footer>
<div class="container">
<hr>
<p><small><a href="http://google.com">Link</a> link</small></p>
</div>
</footer>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Ich möchte einfach eine JSON-Datei in eine Tabelle laden Bootstrap verwenden.
Muss ich einfach in der Kopfzeile die jQuery zwischen dem '' hinzufügen? Ich habe es trotzdem versucht, und es scheint immer noch nicht zu funktionieren. – user5368737
Ich habe meine Frage aktualisiert, es scheint immer noch nicht zu funktionieren. – user5368737
@ user5368737, ich habe meine Lösung bearbeitet, Sie sind verpasste jQuery-Bibliothek, das ist, dass Sie Fehler – praguan