如何将JSON数据加载到Bootstrap表中？
有一种方法可以使用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); }); Table Data Addition Item ID Item Name Item Price
你能帮我们确定一下我错过的部分吗？
这是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。
好吧，你的代码中有一些错误：
- 你导入jQuery两次（其中一个是在启动
html标签之前，我认为是不允许的），我已经解决了这个问题。 - 您在代码段中引用的文件不存在，因此我已经为您修复了这些问题。
- 我不确定你要用
data-toggle="table" data-toolbar="#toolbar"来完成什么，但当我删除它时，表开始工作了。
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 }); });
Table Data Addition Item ID Item Name Item Price