title: Bootstrap-Table does not render the JSON data (but loads it successfully)
body: <p>I'm tryig to use <a href="http://bootstrap-table.wenzhixin.net.cn/" rel="nofollow noreferrer">bootstrap-table</a> plugin to render my json data in a table. The data gets loaded successfully, however the plugin does not render the data into the table, it just says <code>No matching records found</code>.</p>
  
  <p>I've been following the examples in the docs, tried to use methods like <code>load</code> and <code>refresh</code>, though according to <a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/welcome.html" rel="nofollow noreferrer">the example I almost copy-pasted</a>, you don't need to use any methods to load and render the data, you just have to specify either the <code>data-url</code> attribute in <code>table</code> tag, or add <code>url</code> property on a table object in your js file. I tried both variants and neither seemed to work.</p>
  
  <p>Here's how I define my table:</p>
  
  <pre><code>&lt;h1&gt;Table&lt;/h1&gt;
  &lt;div id="toolbar"&gt;
      &lt;button id="remove" class="btn btn-danger" disabled=""&gt;
          &lt;i class="glyphicon glyphicon-remove"&gt;&lt;/i&gt;
          Delete
      &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;table
      id="table"
      data-url="/books/all"
      data-toolbar="#toolbar"
      data-search="true"
      data-sortable="true"
      data-show-refresh="true"
      data-show-toggle="true"
      data-show-columns="true"
      data-show-export="true"
      data-detail-view="true"
      data-detail-formatter="detailFormatter"
      data-minimum-count-columns="2"
      data-show-pagination-switch="true"
      data-pagination="true"
      data-id-field="id"
      data-page-list="[10, 25, 50, 100, ALL]"
      data-show-footer="false"
      data-side-pagination="server"
      data-response-handler="responseHandler"&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The <code>/books/all</code> returns the json data like this:</p>
  
  <pre><code>[{"id":42
      "name":"whatever",
  "description":"whatever"
  "cover_img":"https://whatever.jpg"
  "available_count":10,
  "price":6.99,
  "author_id":21,
  "publisher_id":5,
  "author_first_name":"Harper",
  "author_last_name":"Lee",
  "author_birthday":"1926-04-27T22:00:00.000Z",
  "publisher_name":"Penguin Fiction"},...]
  </code></pre>
  
  <p>I define my columns in js:</p>
  
  <pre><code>let $table = $('#table'),
      $remove = $('#remove'),
      selections = [];
  
  const initTable = () =&gt; {
      $table.bootstrapTable({
          url: '/books/all',
          height: getHeight(),
          columns: [
              [
                  {
                      field: 'state',
                      checkbox: true,
                      rowspan: 2,
                      align: 'center',
                      valign: 'middle'
                  }, {
                      title: 'Book ID',
                      field: 'id',
                      rowspan: 2,
                      align: 'center',
                      valign: 'middle',
                      sortable: true,
                      footerFormatter: totalTextFormatter
                  }, {
                      title: 'Book Detail',
                      colspan: 3,
                      align: 'center'
                  }
              ],
              [
                  {
                      field: 'name',
                      title: 'Book Name',
                      sortable: true,
                      editable: true,
                      align: 'center',
                      footerFormatter: totalNameFormatter
                  }, {
                      field: 'price',
                      title: 'Book Price',
                      sortable: true,
                      align: 'center',
                      editable: {
                          type: 'text',
                          title: 'Book Price',
                          validate(value) {
                              value = $.trim(value);
  
                              if (!value) {
                                  return 'This field is required';
                              }
  
                              if (!/^\$/.test(value)) {
                                  return 'This field needs to start with $';
                              }
  
                              const data = $table.bootstrapTable('getData'),
                                    index = $(this).parents('tr').data('index');
                              console.log(data[index]);
                              return '';
                          }
                      },
                      footerFormatter: totalPriceFormatter
                  }, {
                      field: 'operate',
                      title: 'Book Operate',
                      align: 'center',
                      events: operateEvents,
                      formatter: operateFormatter
                  }
              ]
          ]
      });
  
      setTimeout(() =&gt; {
          $table.bootstrapTable('resetView');
      }, 200);
  
      $table.on('check.bs.table uncheck.bs.table ' +
          'check-all.bs.table uncheck-all.bs.table',
          () =&gt; {
              $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
  
              selections = getIdSelections();
      });
  
      $table.on('expand-row.bs.table', (e, index, row, $detail) =&gt; {
          if (index % 2 == 1) {
              $detail.html('Loading from ajax request...');
              $.get('LICENSE', res =&gt; {
                  $detail.html(res.replace(/\n/g, '&lt;br&gt;'));
              });
          }
      });
  
      $table.on('all.bs.table', (e, name, args) =&gt; {
          console.log(name, args);
      });
  
      $remove.click(() =&gt; {
          const ids = getIdSelections();
          $table.bootstrapTable('remove', {
              field: 'id',
              values: ids
          });
          $remove.prop('disabled', true);
      });
  
      $(window).resize(() =&gt; {
          $table.bootstrapTable('resetView', {
              height: getHeight()
          });
      });
  };
  
  
  function getIdSelections() {
      return $.map($table.bootstrapTable('getSelections'), row =&gt; row.id)
  }
  
  function responseHandler(res) {
      $.each(res.rows, (i, row) =&gt; {
          row.state = $.inArray(row.id, selections) !== -1;
      });
      return res;
  };
  </code></pre>
  
  <p>The <code>load-success.bs.table</code> event receives the data every time I refresh either the page or the table. The <code>responseHandle</code> function gets fired as well and receives the same valid data.</p>
  
  <p>The JSON data format is valid and if I just copy the response from <code>/books/all</code> request and paste it to the <code>data</code> property in bootstrapTable initialization object (just after the <code>columns</code> property), the data will be rendered normally.</p>
  
  <hr>
  
  <p>Could you help me to understand what I'm doing wrong and resolve that issue?</p>