Refresh Bootstrap-table

Question

The problem is that I cannot make the table (bootstrap-table) update the data after completion of the registration. I'm trying to do it via JS, but without success. I've tried the following:

JS

$.post($form.attr('action'), $form.serialize(), function (result) {
    if (result.status == "true") {
        $(location).attr('href', result.acao.url);
    } else {
        $('#cargo').formValidation('resetForm', true)
        $('#cadastroCargo').modal('hide')
        //ATTEMPT  REFRESH BOOTSTRAP-TABLE:
        $('#teste').bootstrapTable('refresh')
    }
}, 'json');

HTML/PHP

    <button class="btn btn-primary pull-right btn-import-user btn-sm" data-toggle="modal" data-target="#cadastroCargo">Novo Cadastro</button>

<!-- Modal -->
<div class="modal fade" id="cadastroCargo" tabindex="-1" data-keyboard="false" data-backdrop="static" role="dialog" aria-labelledby="cargoLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="cargo" action="Cargo/inserir" method="POST" enctype="multipart/form-data" autocomplete="off">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="cargoLabel">Cadastrar Cargo</h4>
                </div>
                <div class="modal-body">
                    <fieldset>
                        <div class="form-group">
                            <label class="modal-font-body control-label">Informe o Cargo</label>
                            <input name="titulo" type="text" class="form-control input-sm" id="titulo" data-minlength="4" size="35" value="<?= @$cargo->titulo ?>" data-error="Por favor, preencha este campo corretamente!" required>
                            <input type="hidden" name="id"  value="<?= @$cargo->id ?>">
                            <input type="reset" id="configreset" value="reset" hidden>
                        </div>
                        <div id="mensagemSucesso" class="alert alert-success alerta-sucesso" hidden></div>
                    </fieldset>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                    <input type="submit" id="salvar" value="Salvar" name="salvar" class="btn btn-primary">
                </div>
            </form>
        </div>
    </div>
</div> 

<table id="teste" name="teste" class="table table-striped" data-toggle="table" data-search="true" data-show-refresh="true" data-show-columns="true"
    <thead>
        <tr>
            <th class="th-small" data-align="left" data-sortable="true">ID</th>
            <th data-align="left" data-sortable="true">Nome</th>
            <th class="th-small">Ações</th>
        </tr>
    </thead>
    <tbody>
        <?php
        foreach ($cargo as $key => $v) {
        ?>
            <tr>
                <td><?= $v->id ?></td>
                <td><?= $v->titulo ?></td>
                <td>
                    <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="submit" data-toggle="dropdown">... <span class="caret"></span></button>
                        <ul class="table-modal dropdown-menu">
                            <li><a data-remote="Cargo/page/visualizar/<?= $v->id ?>" role="button" data-toggle="modal" data-target="#select-modal">Visualizar</a></li>
                            <li><a data-remote="Cargo/page/alterar/<?= $v->id ?>" data-toggle="modal" data-target="#editarIdade">Editar</a></li>
                        </ul>
                    </div>  
                </td>
            </tr>
        <?php } ?>
    </tbody>        
</table>

Answer 1

1) fill up html tag on the table named data-url

2) when refresh needed call js function $('#teste').bootstrapTable('refresh')

Answer 2

Ofcourse it cant refresh, you havent followed the doco or examples to use a data source that can be refreshed.

http://bootstrap-table.wenzhixin.net.cn/documentation/

http://issues.wenzhixin.net.cn/bootstrap-table/

http://issues.wenzhixin.net.cn/bootstrap-table/#methods/refresh.html

You are using data from html type approach, NOT a data-url.

As your printing to the page using php when page first requested, how do you expect the table to know where to get refreshed data from?

Easier just to fix how you create table, that way you still have dropdowns and ect.

Look at examples and doco links above and:

1. Use formatter column option to make your dropdowns
2. data-url to load from data source, see doco for example format
3. just define TH using html, using those 2 new options to handle tbody content

Table Options

https://bootstrap-table.com/docs/api/table-options/

---

table#url

https://bootstrap-table.com/docs/api/table-options/#url

• Attribute: data-url

• Type: String

• Detail:

  A URL to request data from remote site.

  Note that the required server response format is different depending on whether the 'sidePagination' option is specified. See the following examples:

  • Without server-side pagination
  • With server-side pagination

• Default: undefined

• Example: From URL

---

table#rowStyle (for styling ALL body columns)

https://bootstrap-table.com/docs/api/table-options/#rowstyle

• Attribute: data-row-style

• Type: Function

• Detail:

  The row style formatter function, takes two parameters:

  • row: the row record data.
  • index: the row index.

  Support classes or css.

• Default: {}

• Example: Row Style

---

column#formatter (per-column option)

https://bootstrap-table.com/docs/api/column-options/#formatter

• Attribute: data-formatter

• Type: Function

• Detail:

  The context (this) is the column Object.

  The cell formatter function, take three parameters:

  • value: the field value.
  • row: the row record data.
  • index: the row index.
  • field: the row field.

• Default: undefined