如何将JSON数据加载到Bootstrap表中？ [英] How to load JSON data into Bootstrap table?

问题描述

有使用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，名称：test12，price：$ 12}，{id：13，name：te st13，price：$ 13}，{id：14，name：test14，price：$ 14}，{id：15，name：test15 ，价格：$ 15}，{id：16，name：test16，price：$ 16}，{id：17，name：test17，价格：$ 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>表数据添加< / title> < meta charset =utf-8> < link rel =stylesheethref =bootstrap.min.css> < link rel =stylesheethref =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 =tabledata-toggle =tabledata-toolbar =＃toolbardata-height =460> < THEAD> < TR> < th data-field =id>项目ID< / th> < th data-field =name>项目名称< / th> < th data-field =price>项目价格< / th> < / TR> < / THEAD> < /表> < / div>< / body>< / html>  

<你们可以请帮助确定我缺少的部分。

以下是CSS和JS版本 -

1. bootstrap.min.css v.3.2


2. bootstrap-table.css v.1.8.1


3. jquery.min.js v.3.0


4. bootstrap.min.js v.3.2


5. bootstrap-table.js v.1.10.1。

解决方案

回答原始问题：

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

1. 您导入jQuery两次（其中一次是在启动 html 标签之前，我认为是不允许的），我已经解决了这个问题。


2. 您在代码段中引用的文件不存在，所以我已经为您解决了这个问题。


3. 我不确定你用 data-toggle =tabledata-toolbar =＃toolbar完成了什么，但当我删除它时，该表开始工作。

---

将JSON数据加载到Bootstrap中的示例表格：

< pre class =snippet-code-js lang-js prettyprint-override> 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，名称：test12，price：$ 12}，{id：13，name：te st13，price：$ 13}，{id：14，name：test14，price：$ 14}，{id：15，name：test15 ，价格：$ 15}，{id：16，name：test16，price：$ 16}，{id：17，name：test17，价格：$ 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>表数据添加< / title> < meta charset =utf-8> < link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css> < link rel =stylesheethref =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><体> < div class =container> < table id =tabledata-height =460> < THEAD> < TR> < th data-field =id>项目ID< / th> < th data-field =name>项目名称< / th> < th data-field =price>项目价格< / th> < / TR> < / THEAD> < /表> < / div>< / body>< / html>  

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 -

1. bootstrap.min.css v.3.2
2. bootstrap-table.css v.1.8.1
3. jquery.min.js v.3.0
4. bootstrap.min.js v.3.2
5. bootstrap-table.js v.1.10.1.

解决方案

Answer to original question:

Well, there were a few mistakes in your code:

1. You were importing jQuery twice (one of which was before starting the html tag, which I think is not allowed), I've fixed this.
2. The files you reference in your snippet do not exist, so I've fixed that for you.
3. I'm not sure what you were trying to accomplish with data-toggle="table" data-toolbar="#toolbar", but when I removed it, the table started working.

---

Example of loading JSON data into a Bootstrap table:

 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>

这篇关于如何将JSON数据加载到Bootstrap表中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！