How do i reload my dataTable?

FábioPeixeiro

im having some problems with reloading the dataTable plugin after insert data. I can do it if not using the dataTable jQuery plugin but i need to combine both.
Here is the code:

$('#tabela').DataTable({
   pageLength: 25,
   dom: 'Bfrtip'
});

When I insert the data I use:

$('#insert_form').on("submit", function(event){
        event.preventDefault(); //stops page refresh
        $.ajax({
            url:"testes/insert.php", //file to insert data into DB
            method:"POST",
            data:$('#insert_form').serialize(),
            beforeSend:function(){
                $('#insert').val("Inserting");
            },
            success:function(data){
                $('#insert_form')[0].reset();
                $('#add_data_Modal').modal('hide');
                $('#participantes_table').html(data);
            }
        });
    });

Now my question is, how do I reload the data in the dataTable?

I've tried to debug the error on the console and got this:
https://prnt.sc/fanb0u

for what I can understand it is saying I that i don't have the .js file of DataTable library but I do right?
https://prnt.sc/fankk3
https://prnt.sc/fankwm

I followed this video:
https://www.youtube.com/watch?v=5wDc47jcg0o

Best regards,
Fábio Peixeiro

tangerine

I followed this video:

Have you asked the author of the video? He will understand his own code more quickly than anyone else will.

FábioPeixeiro

@tangerine on the video he dont uses DataTable jQuery plugin, he uses a normal table now i cant combine both in order to work. I mean, i can make it work without DataTable jQuery plugin but i would like to use the DataTable jQuery plugin to update the table as shown on the video.

tangerine

To be honest, I wouldn't start from someone else's code which doesn't use DataTables. I would start from the examples on this site.

FábioPeixeiro

I didnt used his code, i just took the idea and adapt it to my project

BROB201

I would think that $('#tabela').DataTable().ajax.reload() would do the trick, but it doesn't look like you have a ajax data source set. you will want to set it with the ajax option.

FábioPeixeiro

How do i set the ajax data source set?
var table = $('#tabela').DataTable({
"ajax": {??????},
pageLength: 25,
dom: 'Bfrtip',
buttons: [
{extend: 'copyHtml5', text: 'Copiar', exportOptions: {columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]}},
{extend: 'print', text: 'Imprimir', exportOptions: {columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]}},
{extend: 'excelHtml5', exportOptions: {columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]}},
{extend: 'pdfHtml5', exportOptions: {columns: [0, 1, 2, 3, 4, 5, 6, 7, 8]}}
]
});
EDIT: Im getting the data from a mysql table
@BROB201

BROB201

See the datatable documentation for the different ways you can do it. It pretty much takes the same options that you are already passing to jQuery.ajax(). https://datatables.net/reference/option/ajax

allan

The quick and easy way would be to do:

$('#participantes_table').DataTable().destroy();
$('#participantes_table').empty().html(data);
$('#participantes_table').DataTable( {
  ...
} );

That will destroy the old table, insert your new HTML and then create a new DataTable.

The disadvantage of this method is that although it is just a handful of lines of code, it is the sledgehammer approach. Its the most inefficient way since it isn't reusing the existing table.

For that you would need to Ajax load the data - see the reference @BROB201 pointed to and also the manual on Ajax loading of data for details of Ajax loading data in DataTables.

Allan