title: How to load JSON data into Bootstrap table?
body: <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>