Reload bootstrap table Refresh and change settings

Question

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.

The table is filled at page load, but some events can fire inside the page and change it's configuration based on user settings.

I took a look at the official documentation, and some questions in SO. And I tried to do it, as below:

var $table = $('#grd-fatura');        
$table.bootstrapTable('refresh', {
    pageSize: 2
});

(The localstorage.getItem block and rules were removed from above code for testing purposes.)

And here is my table code (note that some elements are in portuguese):

<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">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="ID" data-unique-id="ID" data-align="left" data-visible="false" data-sortable="true">Código</th>
            <th data-field="estabelecimento" data-align="left" data-sortable="true">Estabelecimento</th>
            <th data-field="historico" data-align="left" data-sortable="true">Histórico</th>
            <th data-field="tipo" data-align="left" data-sortable="true">Tipo</th>
            <th data-field="pessoa" data-align="left" data-sortable="true">Pessoa</th>
            <th data-field="emissao" data-align="center" data-sortable="true">Emissão</th>
            <th data-field="referencia" data-align="left" data-sortable="true">Referência</th>
            <th data-field="situacao" data-align="left" data-sortable="true">Situação</th>
            <th data-field="total" data-align="right" data-sortable="true" data-footer-formatter="Totalizador">Total</th>
        </tr>
    </thead>
</table>

The code does not work. The table does not refresh, and the code does not generate any errors. I took a look at some examples , 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?

Note: I am using Bootstrap 3 .

Answer 1

Try this:

$table.bootstrapTable('refresh', {
    query: {pageSize: 2}
});