如何将JSON数据加载到Bootstrap表格中？

Question

如何将JSON数据加载到Bootstrap表格中？

9

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.

Here is the code -

 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>

Can you guys please help identify what part I am missing.

Here are CSS and JS versions -

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.

- Anurag Daware

4

您的 JSFiddle 对我来说运行良好。（也就是说，JSON 数据以我期望的方式显示在表格中）。什么是“不工作”？ - leroydev

你应该创建一个fiddle来展示你的代码错误。提供一个工作的fiddle链接并不能帮助其他人理解问题。但是通过查看你的错误，很容易发现bootstrapTable函数不可用，这可能是由于正确的资源文件未被包含所致。 - Deep

代码中的fiddle是否完全复制了您的应用程序？此外，您引用的所有库是否也相同？ - Simon Price

你尝试过使用load方法吗？ - Pratyush

@leroydev 问题是我有所有行的数据，我想一次性将它们加载到表中，我参考了JSFiddle链接中提到的解决方案。但在我的项目中没有起作用，所以我创建了一个独立页面，在上面提供了代码片段，但仍然无法工作，需要帮助理解我缺少哪个部分，我发现我的代码与JSFiddle链接相同，除了CSS和JS文件可能不同，据我所知，它们都是最新的。抱歉，我是Web开发的新手，请多多包涵。让我尝试一下Load方法是什么。 - Anurag Daware

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- leroydev · Accepted Answer

原问题的答案：

你的代码中有几个错误：

你导入了两次jQuery（其中一次是在开始html标签之前，我认为这是不允许的），我已经修复了这个问题。
你在片段中引用的文件不存在，所以我已经为你修复了这个问题。
我不确定你试图使用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-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>