How to add new table row with contents from text box with post ajax

Question

I have a table created using html and javascript, the contents of it I used ajax’s GET method to pull a url, in JSON. I’m trying now using POST in ajax to add content to this table, where I write in two text boxes the number of a code and the name of a product and when I click on the record button it create one more row in the table with the values I put. Someone can give me a light?

Follows the HTML:

<div class="card-body" style="background-color:#262626">

             <table class="table  table-hover table-bordered" id="dataTable"  >

                <tbody>


              </tbody>
            </table>
          </div>
        </div>
    </div>
<a><button class="btn" id="popuplink" style= "background-color:#C25C40; border-color:#C25C40; position:absolute; left:850px; top:55px; color:white;">Novo grupo</button></a>
            </div>
            <div id="popup">
<div id="content">
<input id="popupcodigo" type="text" placeholder="codigo"></input>
<input id="popupgrupo" type="text" placeholder="grupo"></input>
<input id="popupinativo" type="text" placeholder="inativo"></input>
    <input id="popupclose" type="Button" value="Gravar"/>   
 </div>   

</div>

Follow javascript with ajax:

$(function(){
$.ajax({
    url: "http://url-usada/",

    dataType: 'json',
    type: 'get',
    cache:false,
    success: function(data){

        var event_data = '';

            //começo da tabela
            event_data += '<thead>';
            event_data += '<tr style="color:white">';
            event_data += '<th width="10%">Código</th>';
            event_data += '<th>Grupo</th>';
            event_data += '<th>Inativo</th>';
            event_data += '<th width="10%">Ação</th>';
            event_data += '</tr>';  
            event_data += '</thead>';   

            //final da tabela
            event_data += '<tfoot>';
            event_data += ' <tr style="color:white">';
            event_data += '  <th width="10%">Código</th>';
            event_data += ' <th>Grupo</th>';
            event_data += '  <th>Inativo</th>';
            event_data += ' <th width="17%">Ação</th>';
            event_data += ' </tr>';
            event_data += '</tfoot>';

        //conteudo da tabela vindo da url
        $.each(data, function(index, value){

            event_data += '<tr>';
            event_data += '<td>'+value.Cdgrupo+'</td>';
            event_data += '<td>'+value.Grupos+'</td>';
            event_data += '<td>'+value.Inativo+'</td>';
            event_data += '<td><a href="alterar-grupoc.html"><button type="button" class="btn btn-info mesmo-tamanho" title="Alterar Grupo"><i class="fa fa-edit"></i></button></a> <a href="404.html" ><button type="button" class="btn btn-danger mesmo-tamanho" title="Excluir Grupo"><i class="fa fa-times"></i></button></a></td>';
            event_data += '</tr>';
        });


        $('#dataTable').css({'color':'white'});
        $("#dataTable").append(event_data);
    },

    //aviso de erro caso o conteudo da tabela não seja carregado
    error: function(d){

        alert("Erro.");
    }


});
});

Answer 1

"If you use the mysql follow":

Like you’re using the api datatable applies a function of reload in return.

on the return of ajax apply this:

$('#dataTable').DataTable().ajax.reload( null, false);

Answer 2

First you need to include jquery in your html at the bottom of the page (before including your.js script!):

Done this, you can, put your HTML adding products within a form tag:

Remembering that your record button will be the Submit button of this form and also, as soon as clicked on record, this event will call its function that has logic to, with ajax, insert a new line with the added product:

That done, if you have difficulties with Jquery to do what you need with Ajax, you can follow this devmedia article that explains how to use Ajax: AJAX Tutorial