Impossible to reload my dataTable following a delete row

beegeezzz

Hello,

I try for several hours to reload my dataTable, no success until now...

This is my json object received from the server to js

{"0":{"id":"123","nom":"G\u00e9om\u00e8tre","prenom":"Barack","adresse":null,"numero":null,"boite":null
,"cp":null,"ville":null,"mail":null,"telephone":null,"inami":null,"tva":null,"disponibilite":null,"commentaire"
:null},"1":{"id":"128","nom":"G\u00e9om\u00e8tre-expert","prenom":"Barack","adresse":null,"numero":"6"
,"boite":"3","cp":"1300","ville":"Bruxelles","mail":"contact@dubinfo.be","telephone":"0471301253","inami"
:"5533434343","tva":"BE 0832.581.586","disponibilite":null,"commentaire":null}}

This is my code in js

 $.ajax
                  (
                      {
                          method : 'POST',
                          //la route (controleur) et le paramètre (id à supprimer)
                          url: url + "/professionnels/deleteProfessionnels/"+id_to_delete,
                          dataType: 'json',
                          success:function(retour)
                          {
                              
                              $('#example').dataTable().ajax.reload();

Errors

TypeError: $(...).dataTable(...).ajax is undefined

I tried a lot of possibilities, no success.

Thank you in advance for your help.

kthorngren

Please don't post duplicate questions. Please look at the response in your other thread:
https://datatables.net/forums/discussion/44367/datatable-does-not-work-with-genereted-html#latest

And take a look at the first FAQ here regarding this TypeError: $(...).dataTable(...).ajax is undefined:
https://datatables.net/faqs/index#Most-common-FAQs

Kevin

beegeezzz

Thank you Kevin and sorry for the duplicate post.

By the way, I tried the clear method, no success

$('#example').dataTable().clear();

TypeError: $(...).dataTable(...).clear is not a function

Thanks again for all

kthorngren

Did you read the FAQ I mentioned?

You need to change from $('#example').dataTable().clear(); to $('#example').DataTable().clear();. Notice DataTable has a capital D.

Kevin

beegeezzz

Thank you for your reply.

I don't have any error, but the table stills present, the clear function makes nothing.

But, I'm using clear in an ajax function, not in the ajax dataTable, is it ok ?

This is my dataTable code

$('#example').DataTable( {
    "oLanguage":
    {
      "oPaginate":
      {
        "sPrevious": "Page précédente",
        "sNext": "Page suivante",
      }
    }
  } );

This is my code

//quand on clic sur un élemnt dont la classe commence par supprimer_categorie
      $('body').on('click', '[class^="supprimer_pro"]', function ()
      {
            
            var ok = confirm("Voulez-vous vraiment supprimer ce prestataire ?");
            if(ok)
            {
                  var nomdelaclasse = this.className;
                  //alert(nomdelaclasse);
                  var elements = nomdelaclasse.split('#');
                  var id_to_delete = elements[1];
                  //alert(id_to_delete);
                               
                  $.ajax
                  (
                      {
                          method : 'POST',
                          //la route (controleur) et le paramètre (id à supprimer)
                          url: url + "/professionnels/deleteProfessionnels/"+id_to_delete,
                          dataType: 'json',
                          success:function(retour)
                          {
                              
                              $('#example').DataTable().clear();
                              //$('#example').DataTable().ajax.reload(retour);
                               //location.reload(); 
                              
                              
                              
                              //alert(JSON.stringify(result));
                              //[{"id":"17","nom_categorie":"a\r\n"},{"id":"18","nom_categorie":"b"},{"id":"19","nom_categorie":"c"}]
                              
                          },
                          error:function(erreur)
                          {
                              alert("dans erreur");
                              alert(erreur);
                          }
                      
                      }
                  );      
            }
            
        });
     

Thanks for your help

kthorngren

According to the clear() docs you need to redraw the table:

Please be aware that this method will not automatically redraw the table with an empty data set. In order to redraw the table use the draw() method.....

Try:
$('#example').DataTable().clear().draw();

Kevin

beegeezzz

Thank you, the table is clear, but no redraw...

Have I to give a json object ?

You can see the video here : dubinfo.be/kevin.mov

Hope I will be able to build the table, it will be great...

Thanks again

kthorngren

The table is redrawn. Its redrawn with no data from the clear command. Now you will use rows.add() to add your data.

After seeing the video a better option may be to remove the row from the table using row().remove(). This way you won't need to reload the table each time someone deletes a row.

Kevin

beegeezzz

Hi Kevin,

I'm so happy, it's working....

Thank you so much for your precious help and mainly for your patience...

This is the code I used, I am able to remove row from the dataTable (if confirm) and then remove the row from the database with AJAX.

Again, thank you for all and have a great day.

David

var table = $('#example').DataTable();
      
      $('#example tbody').on( 'click', '[class^="supprimer_pro"]', function ()
      {
         var ok = confirm("Are you sure to want to remove this professionnal  ?");
            if(ok)
            {
                  //I remove the row from dataTable 
                  table
                  .row( $(this).parents('tr') )
                  .remove()
                  .draw();

                  var nomdelaclasse = this.className;
                  //alert(nomdelaclasse);
                  var elements = nomdelaclasse.split('#');
                  var id_to_delete = elements[1];
                  //alert(id_to_delete);
                  //I remove the data from the DataBase             
                  $.ajax
                  (
                      {
                          method : 'POST',
                          //la route (controleur) et le paramètre (id à supprimer)
                          url: url + "/professionnels/deleteProfessionnels/"+id_to_delete,
                          dataType: 'json',
                          
                          error:function(erreur)
                          {
                              alert("Erreur dans le fichier professionnels.js");
                          }
                      
                      }
                  );      
            }   
         
      } );