title: Reload bootstrap table Refresh and change settings
body: <p>I'm currently trying to change on a bootstrap table it's configurations dynamically, based on some user configurations stored in localStorage and reload it.</p>
  
  <p>The table is filled at page load, but some events can fire inside the page and change it's configuration based on user settings.</p>
  
  <p>I took a look at the <a href="http://wenzhixin.net.cn/p/bootstrap-table/docs/documentation.html" rel="nofollow noreferrer">official documentation,</a> and <a href="https://stackoverflow.com/questions/27915296/how-to-refresh-bootstrap-table-data">some</a> <a href="https://stackoverflow.com/questions/27841610/unable-to-set-data-url-value-using-jquery-in-bootstrap-table">questions</a> in SO. And I tried to do it, as below:</p>
  
  <pre><code>var $table = $('#grd-fatura');        
  $table.bootstrapTable('refresh', {
      pageSize: 2
  });
  </code></pre>
  
  <p>(The localstorage.getItem block and rules were removed from above code for testing purposes.)</p>
  
  <p>And here is my table code (note that some elements are in portuguese):</p>
  
  <pre><code>&lt;table 
      id="grd-fatura" data-click-to-select="true" data-response-handler="responseHandler"
      data-pagination="true" @*data-height="460"*@ data-show-footer="true" data-search="true" 
      data-show-columns="true" data-cache="false" data-show-toggle="true" data-show-export="true"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th data-field="state" data-checkbox="true"&gt;&lt;/th&gt;
              &lt;th data-field="ID" data-unique-id="ID" data-align="left" data-visible="false" data-sortable="true"&gt;Código&lt;/th&gt;
              &lt;th data-field="estabelecimento" data-align="left" data-sortable="true"&gt;Estabelecimento&lt;/th&gt;
              &lt;th data-field="historico" data-align="left" data-sortable="true"&gt;Histórico&lt;/th&gt;
              &lt;th data-field="tipo" data-align="left" data-sortable="true"&gt;Tipo&lt;/th&gt;
              &lt;th data-field="pessoa" data-align="left" data-sortable="true"&gt;Pessoa&lt;/th&gt;
              &lt;th data-field="emissao" data-align="center" data-sortable="true"&gt;Emissão&lt;/th&gt;
              &lt;th data-field="referencia" data-align="left" data-sortable="true"&gt;Referência&lt;/th&gt;
              &lt;th data-field="situacao" data-align="left" data-sortable="true"&gt;Situação&lt;/th&gt;
              &lt;th data-field="total" data-align="right" data-sortable="true" data-footer-formatter="Totalizador"&gt;Total&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The code does not work. The table does not refresh, and the code does not generate any errors. I took a look at <a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/methods/refresh.html" rel="nofollow noreferrer">some examples</a>, and could not find where I am going wrong. So, how do I dynamically change the Boostrap table settings? What I am doing wrong in the above code?</p>
  
  <p>Note: I am using <a href="http://getbootstrap.com/" rel="nofollow noreferrer">Bootstrap 3</a>.</p>