Javascript 如何将 JSON 数据加载到 Bootstrap 表中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37814493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-23 20:45:11 来源:igfitidea点击:
How to load JSON data into Bootstrap table?
提问by Anurag Daware
There is way using javascript (http://jsfiddle.net/8svjf80g/1/) to load JSON data into Bootstrap table but same example is not working with me.
有一种方法可以使用 javascript ( http://jsfiddle.net/8svjf80g/1/) 将 JSON 数据加载到 Bootstrap 表中，但相同的示例不适用于我。
Here is the code -
这是代码 -
var $table = $('#table');
var mydata =
[
{
"id": 0,
"name": "test0",
"price": "<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Table Data Addition</title>
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
</head>
<body>
<div class="container">
<table id="table"
data-toggle="table"
data-toolbar="#toolbar"
data-height="460">
<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>
</div>
</body>
</html>
"
},
{
"id": 1,
"name": "test1",
"price": ""
},
{
"id": 2,
"name": "test2",
"price": ""
},
{
"id": 3,
"name": "test3",
"price": ""
},
{
"id": 4,
"name": "test4",
"price": ""
},
{
"id": 5,
"name": "test5",
"price": ""
},
{
"id": 6,
"name": "test6",
"price": ""
},
{
"id": 7,
"name": "test7",
"price": ""
},
{
"id": 8,
"name": "test8",
"price": ""
},
{
"id": 9,
"name": "test9",
"price": ""
},
{
"id": 10,
"name": "test10",
"price": ""
},
{
"id": 11,
"name": "test11",
"price": ""
},
{
"id": 12,
"name": "test12",
"price": ""
},
{
"id": 13,
"name": "test13",
"price": ""
},
{
"id": 14,
"name": "test14",
"price": ""
},
{
"id": 15,
"name": "test15",
"price": ""
},
{
"id": 16,
"name": "test16",
"price": ""
},
{
"id": 17,
"name": "test17",
"price": ""
},
{
"id": 18,
"name": "test18",
"price": ""
},
{
"id": 19,
"name": "test19",
"price": ""
},
{
"id": 20,
"name": "test20",
"price": ""
}
];
$(function () {
$('#table').bootstrapTable({
data: mydata
});
console.log(mydata);
}); var $table = $('#table');
var mydata =
[
{
"id": 0,
"name": "test0",
"price": "<html>
<head>
<title>Table Data Addition</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
</head>
<body>
<div class="container">
<table id="table" data-height="460">
<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>
</div>
</body>
</html>
"
},
{
"id": 1,
"name": "test1",
"price": ""
},
{
"id": 2,
"name": "test2",
"price": ""
},
{
"id": 3,
"name": "test3",
"price": ""
},
{
"id": 4,
"name": "test4",
"price": ""
},
{
"id": 5,
"name": "test5",
"price": ""
},
{
"id": 6,
"name": "test6",
"price": ""
},
{
"id": 7,
"name": "test7",
"price": ""
},
{
"id": 8,
"name": "test8",
"price": ""
},
{
"id": 9,
"name": "test9",
"price": ""
},
{
"id": 10,
"name": "test10",
"price": ""
},
{
"id": 11,
"name": "test11",
"price": ""
},
{
"id": 12,
"name": "test12",
"price": ""
},
{
"id": 13,
"name": "test13",
"price": ""
},
{
"id": 14,
"name": "test14",
"price": ""
},
{
"id": 15,
"name": "test15",
"price": ""
},
{
"id": 16,
"name": "test16",
"price": ""
},
{
"id": 17,
"name": "test17",
"price": ""
},
{
"id": 18,
"name": "test18",
"price": ""
},
{
"id": 19,
"name": "test19",
"price": ""
},
{
"id": 20,
"name": "test20",
"price": ""
}
];
$(function () {
$('#table').bootstrapTable({
data: mydata
});
});Can you guys please help identify what part I am missing.
你们能帮我找出我遗漏的部分吗？
Here are CSS and JS versions -
这里是 CSS 和 JS 版本 -
- bootstrap.min.css v.3.2
- bootstrap-table.css v.1.8.1
- jquery.min.js v.3.0
- bootstrap.min.js v.3.2
- bootstrap-table.js v.1.10.1.
- bootstrap.min.css v.3.2
- bootstrap-table.css v.1.8.1
- jquery.min.js v.3.0
- bootstrap.min.js v.3.2
- bootstrap-table.js v.1.10.1。
回答by leroydev
Answer to original question:
对原始问题的回答：
Well, there were a few mistakes in your code:
好吧，您的代码中有一些错误：
- You were importing jQuery twice (one of which was before starting the
htmltag, which I think is not allowed), I've fixed this. - The files you reference in your snippet do not exist, so I've fixed that for you.
- I'm not sure what you were trying to accomplish with
data-toggle="table" data-toolbar="#toolbar", but when I removed it, the table started working.
- 您导入了 jQuery 两次（其中一次是在开始
html标记之前，我认为这是不允许的），我已经解决了这个问题。 - 您在代码段中引用的文件不存在，因此我已为您修复了该文件。
- 我不确定你想用 完成什么
data-toggle="table" data-toolbar="#toolbar"，但是当我删除它时，表开始工作。
Example of loading JSON data into a Bootstrap table:
将 JSON 数据加载到 Bootstrap 表中的示例：
##代码##
##代码##
