How to load JSON data into Bootstrap table?
<p>There is way using javascript (<a href="http://jsfiddle.net/8svjf80g/1/" rel="noreferrer">http://jsfiddle.net/8svjf80g/1/</a>) to load JSON data into Bootstrap table but same example is not working with me.
<p>Here is the code - </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><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);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;Table Data Addition&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link rel="stylesheet" href="bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="bootstrap-table.css"&gt;
    &lt;script src="jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="bootstrap-table.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div class="container"&gt;
        &lt;table id="table"
        data-toggle="table"
               data-toolbar="#toolbar"
               data-height="460"&gt;
        &lt;thead&gt;
            &lt;tr&gt;
                &lt;th data-field="id"&gt;Item ID&lt;/th&gt;
                &lt;th data-field="name"&gt;Item Name&lt;/th&gt;
                &lt;th data-field="price"&gt;Item Price&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
    &lt;/table&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>Can you guys please help identify what part I am missing.
<p>Here are CSS and JS versions - </p>

<ol>
<li>bootstrap.min.css v.3.2</li>
<li>bootstrap-table.css v.1.8.1</li>
<li>jquery.min.js v.3.0</li>
<li>bootstrap.min.js v.3.2</li>
<li>bootstrap-table.js v.1.10.1.</li>
</ol>