javascript - Reload bootstrap table Refresh and change settings - Stack Overflow

admin管理员组

文章数量:1356764

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.

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.

• javascript
• jquery
• html
• twitter-bootstrap

Share Improve this question Follow edited May 23, 2017 at 10:27 CommunityBot 111 silver badge asked Aug 20, 2015 at 14:06 MalavosMalavos 42733 gold badges1212 silver badges2929 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Try this:

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

本文标签： javascriptReload bootstrap table Refresh and change settingsStack Overflow