How to refresh a bootstrap-table after giving update?

Question

Next, in the rows of my table bootstrap when I click opens a modal where I can change the selected information after click. I wanted that right after I clicked on the change button, my table (and only her) updated without I need to give a "refresh on the whole page". I tried with the 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>

Answer 1

In your scope, I’d do it this way:

Scope ta 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);    
}

Answer 2

Solved in an alternative way...

Location.Reload(); <- In Javascript, after clicking the button.