How to update the table (bootstrap-table) via JS after registering?

Question

After registering (within a modal), the table should be updated automatically. But I’m not getting it. NOTE: Languages I am using is PHP and JS.

In jsfiddle, there’s a small demo, in the JS tab is the code (Else) I’m trying to update the bootstrap-table query.

https://jsfiddle.net/andrealbson/yydc9nv0/23/

Answer 1

You can use ajax:

$("#adicionar").click(function()
{
    $.ajax({
        type: 'POST',
        url: 'adicionar.php',
        success: function(data)
        {
            $(".table").append(data);
        }
    });
});

#add -> The id of a button that should be included to perform the action
Type -> Method of sending information
URL -> The php function you will be responsible for including in your table
.Table -> the class of the table where the result of the previous function will be sent

To show the information you can use a echo Even, there you go.

Answer 2

Hei!

I saw in jsfiddle that you are mounting the table with while.. I think it’s worth changing and let own, bootstra-table mount a table for you, it’s simple:

Create a PHP file that returns a json with the table data, and throw the path of that file into the data-url attribute, in the table tag, it looks like this:

> <table id="table-nome"
>   data-url="caminho_data.php"
> >
> <thead>
>   <tr>
>       <th data-field="campo1">Campo 1</th>
>       <th data-field="campo 2">Campo 2</th>
>   </tr>
> </thead>
> </table>

Ai, after recording the information in your modal, on the return of the ajax, just call:

$("#table-nome").bootstrapTable('refresh');

You can see an example here:

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

There are several other examples on this site, take a look, the bootstrap-table has a lot of cool functionality that makes life much easier after we get the hang of it ;)

the/

Another solution, GAMBIS to my view, is to play the table in another file and call this file again on the return of the modal action ajax, and replace the current table...

Answer 3

Well, you can use an ajax request for the register (Form), where the return of this ajax will be the list of the updated table, so you only need to update the table fields with the return of ajax.