如何加载JSON数据到Bootstraptable？

Question

有使用 javascript (http://jsfiddle.net/8svjf80g/1/) 将 JSON 数据加载到 Bootstrap table 的方法，但同样的示例不适用于我。

这是代码 -

 var $table = $('#table');
    var mydata = 
[
    {
        "id": 0,
        "name": "test0",
        "price": "[=13=]"
    },
    {
        "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);
});

<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.

Answer 1

原问题的答案：

嗯，您的代码中有一些错误：

您导入了 jQuery 两次（其中一次是在启动 html 标记之前，我认为这是不允许的），我已经解决了这个问题。
您在代码段中引用的文件不存在，因此我已为您修复。
我不确定你试图用 data-toggle="table" data-toolbar="#toolbar" 完成什么，但是当我删除它时，table 开始工作。

将 JSON 数据加载到 Bootstrap 的示例 table:

 var $table = $('#table');
    var mydata = 
[
    {
        "id": 0,
        "name": "test0",
        "price": "[=10=]"
    },
    {
        "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
    });
});

<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>

如何加载JSON数据到Bootstraptable？

How to load JSON data into Bootstrap table?

javascript

jquery

bootstrap-table