Login/Register
How to load JSON data into Bootstrap table?
Asked Answered
Solved javascriptjquerybootstrap-table
P

1

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 -

  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.
Parsimony answered 14/6, 2016 at 14:11 Comment(5)
Your JSFiddle is working fine for me? (As in, the JSON data is displayed in the way I would expect in the table) What is "not working"? – Rebuttal
you should create a fiddle of your code to show us the error. Giving link of a working fiddle will not help others to understand the issue. But on looking on your error its simple that bootstrapTable function is not available, and it could be due to the correct resource file not included. – Gunnar
is the code in the fiddle an exact replication of your application? Also, are all the libraries you are referencing the same too? – Solana
have you tried load method? – Hymnody
@Rebuttal Issue is I have data for all rows, I want to load it to table at once, I took help of solution mentioned in JSFiddle link.But didnt work in my project so I made a standalone page give in above code snippet so that is also not working, needed help to understand what part I am missing, I see my code is same as JSFiddle link except CSS and JS files can be different, as far I know they are latest. sorry I am newbie to web devlopment so please bear with me. Also let me try what is Load method. – Parsimony
R
39

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>
Rebuttal answered 17/6, 2016 at 10:22 Comment(4)
Thanks, I shall try this code now, by the way I mentioned JS and CSS versions of files I have, but same are not present when I add the code on stackoverflow, so I also was getting some error when origina code snippet was to be run here. – Parsimony
In my code , the script tag was already inside html, while adding snippet I think it reogred the code. so as per your suggestion, I removed data-toggle="table" data-toolbar="#toolbar" and it worked. Also I have a doubt regarding uses of this method (to add JSON data to table):Can I call it anywhere in any JS function? – Parsimony
@Rebuttal Any idea on how to reload data with different columns names. This one doesn't seem to work when I load data again with different column names. I am updating data-fields and inner text inside th's in html with jquery but it doesn't work.. – Proportion
@Proportion create a new question please :) – Rebuttal

© 2022 - 2024 — McMap. All rights reserved.