【发布时间】：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-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>请你们帮忙找出我缺少的部分。
这里是 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方法。
标签： javascript jquery bootstrap-table