How to refresh a bootstrap table after giving update?

Navigation
0

Next in the lines of my bootstrap table when I click opens a modal where I can change the selected information after click. I wanted that right after I clicked the button to change, my table (and only it) would update without needing to give a " refresh on the whole page". I've tried Javascript down but nothing happens. 

var dados = [];
var $myModal = $('#myModal');
var btnAltera = $('#btn-altera');
var $table = $('#table-forms');

$(document).ready(function(){
    $.get('/Formulario/SelecionarFormularios', function(data){
        if (data != null){
            var Formularios = data.data;
            $.each(Formularios, function (i, data) {
                var forms = {
                    id: data.IdFormulario,
                    idempresa: data.IdEmpresa,
                    nomeform: data.NomeFormulario,
                    nomeempresa: data.Empresa.Nome,
                    logopath: data.Empresa.LogoPath,
                }
                dados.push(forms);
            });
        }
    });

    setTimeout(function () {
        $table.bootstrapTable({
            data: dados,
            pagination: true,
            pageSize: 10,
            search: true,
            showRefresh: true,
            showExport: true,
            sidePagination: 'client',
            dataClickToSelect: true,
            columns: [
                {
                    title: 'ID',
                    field: 'id',
                    align: 'center',
                    sortable: true,
                },
                {
                    title: 'IDEMPRESA',
                    field: 'idempresa',
                    align: 'center',
                    sortable: true,
                },
                {
                    title: 'NOME FORMULÁRIO',
                    field: 'nomeform',
                    align: 'center',
                    sortable: true,
                },
                {
                    title: 'EMPRESA',
                    field: 'nomeempresa',
                    align: 'center',
                    sortable: true,
                },
                {
                    title: 'LOGO-URL',
                    field: 'logopath',
                    align: 'center',
                    sortable: true,
                },
            ]
        }).on('click-row.bs.table', function (e, row, $element) {
            $('#id').val(row.id);
            $('#nomeform').val(row.nomeform);
            $('#nomeempresa').val(row.nomeempresa);
            $('#empresamodal').val(row.nomeempresa);
            $('#logopath').val(row.logopath);

            var BotstrapDialog = $myModal;

            BotstrapDialog.modal({
                show: 'false'
            });

            btnAltera.click(function () {
                AlterarFormulario();
                $table.bootstrapTable('refresh', {
                    url: '/Formulario/Formulario'
                });
            });
        });
    }, 200);

    function AlterarFormulario() {
        $.post('/Formulario/AlterarFormulario', {
            IdFormulario: $('#id').val(),
            NomeFormulario: $('#nomeform').val(),
        });
    }
});

Html: 

<div class="row">
    <table id="table-forms" class="table table-bi table-hover" style="table-layout:auto;">
    </table>
</div>
    
asked by anonymous 01.12.2016 / 15:09

2 answers

-2

Solved alternatively ...

location.reload (); < - In JavaScript, after clicking the button.

    
16.12.2016 / 20:30
1

In this scope, I would do the following:

Scope dabela: 

<tr id="row_12">
  <td class="htmlCampo1">...
  <td>
  <td class="htmlCampo2">...
  <td>
  <td class="htmlCampo3">...
  <td>
</tr>

Javascript: 

$(document).ready(function(){
  btnAltera.click(function () {
    if (AlterarFormulario(row_12 //row que quer alterar)) { //se retornar true; 

      //crie uma funcao que pegue os valores dos campos do modal e insira na tabela
      funcAltera(row, campo1, campo2, campo3...);
    }
  });
});

Function that will change the data in row 

function funcAltera(row, campo1, campo2, campo3...) {
    $("#" + row + " td.htmlCampo1").html(campo1);
    $("#" + row + " td.htmlCampo2").html(campo2);
    $("#" + row + " td.htmlCampo3").html(campo3);    
}
    
01.12.2016 / 17:19
generate randomly for a period of time in php split an HTML file