如何将 JSON 数据加载到 Bootstrap 表中？
Posted
技术标签:
【中文标题】如何将 JSON 数据加载到 Bootstrap 表中？【英文标题】：How to load JSON data into Bootstrap table? 【发布时间】：2016-10-15 07:58:42 【问题描述】：有办法使用 javascript (http://jsfiddle.net/8svjf80g/1/) 将 JSON 数据加载到 Bootstrap 表中，但同样的例子不适用于我。
这里是代码 -
var $table = $('#table');
var mydata =
[
"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: mydata
);
console.log(mydata);
);<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->
<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>请你们帮忙找出我缺少的部分。
这里是 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.
【问题讨论】：
您的 JSFiddle 是否适合我？ （如，JSON 数据以我期望的方式显示在表格中）什么是“不工作”？ 您应该创建一个代码以向我们显示错误。提供一个工作小提琴的链接不会帮助其他人理解这个问题。但是在查看您的错误时，很简单，bootstrapTable 功能不可用，这可能是由于未包含正确的资源文件。 小提琴中的代码是您应用程序的精确复制吗？另外，您引用的所有库是否也相同？ 你试过加载方法吗？ @leroydev 问题是我有所有行的数据，我想立即将其加载到表中，我求助于 JSFiddle 链接中提到的解决方案。但在我的项目中没有工作，所以我做了一个独立的页面给出了上面的代码 sn-p 所以这也不起作用，需要帮助来理解我缺少的部分，我看到我的代码与 JSFiddle 链接相同，除了 CSS 和 JS 文件可能不同，据我所知它们是最新的.对不起，我是网络开发的新手，所以请多多包涵。也让我试试什么是Load方法。 【参考方案1】：回答原始问题：
好吧，您的代码中有一些错误：
-
您导入了 jQuery 两次（其中一次是在启动
html 标记之前，我认为这是不允许的），我已经解决了这个问题。
您在 sn-p 中引用的文件不存在，所以我已经为您修复了。
我不确定你想用data-toggle="table" data-toolbar="#toolbar" 完成什么，但是当我删除它时，表格开始工作了。
将 JSON 数据加载到 Bootstrap 表中的示例：
var $table = $('#table');
var mydata =
[
"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: mydata
);
);<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->
<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>【讨论】：
谢谢，我现在要试试这段代码，顺便说一下，我提到了我拥有的文件的 JS 和 CSS 版本，但是当我在 *** 上添加代码时，同样没有出现，所以我也得到了一些在此处运行原始代码 sn-p 时出错。 在我的代码中，脚本标签已经在 html 中，而添加 sn-p 我认为它重新编码了代码。所以根据你的建议，我删除了 data-toggle="table" data-toolbar="#toolbar" 并且它有效。另外我对这种方法的使用（将 JSON 数据添加到表中）有疑问：我可以在任何 JS 函数中的任何位置调用它吗？ @leroydev 关于如何用不同的列名重新加载数据的任何想法。当我用不同的列名再次加载数据时，这个似乎不起作用。我正在使用 jquery 更新 html 中的数据字段和内部文本，但它不起作用.. @AbbasFaisal 请创建一个新问题 :)以上是关于如何将 JSON 数据加载到 Bootstrap 表中？的主要内容，如果未能解决你的问题，请参考以下文章