1

O problema é que eu não consigo fazer com que a tabela (bootstrap-table) atualize os dados após a realização do cadastro. Estou tentando fazer isso via JS, mas sem sucesso. Tentei o seguinte:

-- 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')
            //TENTATIVA DO REFRESH NA 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>
</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>
6
  • Qual é o formato de resposta da sua chamada ajax?
    – flpms
    10/02/2016 às 14:08
  • Me desculpa, mas não entendi. Como assim? 10/02/2016 às 14:32
  • A resposta do server-side vem como xml, json ou o que? Essa informação vai ajudar você a atualizar a sua tabela. O código em PHP exibido, não vai ajudar muito, porque você precisa da resposta AJAX.
    – flpms
    10/02/2016 às 14:35
  • Ok, a resposta vem como json.. 10/02/2016 às 14:53
  • 1
    Traz os dados novamente pro grid. Ao dar o refresh, faça: .bootstrapTable('refresh', {url: 'link/para/meu/arquivo.json'}); 15/02/2017 às 19:39

1 Resposta 1

3

Esse 'refresh' só funciona se o plugin estiver montando a table - no seu caso, você está montando a table com foreach.

Você pode mandar o plugin criar a table pra você usando js, ou usando o parametro data-url="dados-table.php". Eu geralmente utilizo essa opção. Basta criar outro arquivo, jogar a consulta e o retorno dos registros em json_encode. (AH, nesse caso tem que usar o atributo data-toggle="table" pro plugin entender que tem que montar aquela table pra você - também dá pra inicializa-la via js se preferir).

A sua table no código html fica bem simples, só com os ths (nada de td):

<table id="table"
       class="table"
       data-toggle="table"
       data-url="sql/dados-table.php">
  <thead>
    <tr>
      <th data-field="nome-do-campo-aqui">
        Titulo do TH
      </th>
   </tr>
  </thead>
</table>

Se fizer assim, o refresh vai funcionar exatamente como está no seu código.

Aqui você pode ver a documentação do refresh (e de tudo mais que o bootstrap-table proporciona).

Aqui tem um exemplo do que eu tentei explicar.

ps no exemplo eles usam um arquivo .json, eu estou usando um .php me retornando com json_encode e funciona também.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .