Bootstrap Table Columns - bug

by André Albson

HTML

<script src="https://rawgit.com/lodash/lodash/master/dist/lodash.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table id="columns-example-table">
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
    </tr>
  </thead>
  <tbody>
    
  </tbody>
</table>

JavaScript

var data = {
  json: JSON.stringify({
    col1: 'value1',
    col2: 'value2',
    col3: 'value3',
  })
};

$('#columns-example-table').bootstrapTable({
  search: true,
  columns: true,
  pageSize: 3,
  height: 300,
  queryParams: function (params) {},
  ajaxOptions: {
    url: '/echo/json/',
    method: 'post',
    contentType: 'application/json',
    data: data
  },
  ajax: function (request) {
    $.ajax(request);
  },
  responseHandler: function (result) {
    var headers = this.columns[0];
    var keys = _.keys(result);
    
    //Issue: Even though the headers are modified here, the headers in bootstrap-table.js have already been initialized with different field names (0, 1, 2) which will not match incoming json keys. To fix this, initHeader() and initSort() need to be called inside the bootstrap-table load function.
    _.each(keys, function (header, key) {
      headers[key].field = header;
      headers[key].title = _.startCase(header);
      headers[key].sortable = true;
    });
    
    $('#columns-example-table').data('bootstrap.table').initHeader();

    return {
      total: 1,
      rows: [result]
    };
  }
});