Loading data with bootstrapTable fails

I am new to bootstrap and simply trying to replicate several examples of loading data into a bootstrap table, but my data does not show up. Here is the html from jsfiddle

<table class="table" id="table">
  <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>

And here is the javascript:

var $table = $('#table');
var mydata = [{
  "id": 0,
  "name": "test0",
  "price": "$0"
}];

$(function() {
  $('#table').bootstrapTable(
    data: mydata)
  );
});

The header shows up fine, but the data does not. Here is a link to the jsFiddle.

Answers 1

  • bootstrapTable does not come with bootstrap. you need to include it.

    https://jsfiddle.net/9g7c34rb/1/

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
    
    <!-- Latest compiled and minified JavaScript -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
    
    <!-- Latest compiled and minified Locales -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    

Related Articles