Reload dataTable nach Formular in colorbox senden

Question

Ich habe eine Seite test.php, wo ich Daten mit jQuery DataTables abrufen. Es gibt eine "Notiz hinzufügen" -Schaltfläche auf derselben Seite, die ein Ajax-Formular in der Farbbox öffnet. Die Formularübergabe funktioniert einwandfrei, aber ich möchte DataTables aktualisieren, wenn ein Datensatz in meine Datenbank eingefügt wird.

Table:

$(document).ready(function() { 
    $('#example').DataTable(); 
}); 

Ajax Form: Beachten Sie, dass diese Form Last innerhalb colorbox Popup

if (error == false) { 
    $.post("submit.php", $("#add_note").serialize(), function (result) { 
     if (result == 'success') { 
      $('#error_msg').remove(); 
      $('#success_msg').fadeIn(500); 
      // want to reload DataTables here 
     } else { 
      $('#error_msg').fadeIn(500); 
     } 
    }); 
} 

Meine Lösung: versuche ich verschiedene Methoden und die folgenden Verfahren aktualisieren die Seiteninhalt aber nur zum ersten Mal. Wenn ich das Formular zum zweiten Mal ohne Seitenaktualisierung einreichen möchte, hat das Ajax-Formular nicht mehr funktioniert.

$(".content-wrapper").load('test.php'); 

Answer 1

Wenn Sie Laden Tables durch seine ajax option (was ich für diesen speziellen Fall empfehlen würde), können Sie die Daten mit Hilfe der API neu zu laden.

Zuerst wird in einer globalen Variablen die Tables Instanz halten, und die API dann nennen solche Variable:

var table; 
$(document).ready(function() { 
    table = $('#example').DataTable(); 
}); 

if (error == false) { 
    $.post("submit.php", $("#add_note").serialize(), function (result) { 
     if (result == 'success') { 
      $('#error_msg').remove(); 
      $('#success_msg').fadeIn(500); 
      table.ajax.reload(); 
     } else { 
      $('#error_msg').fadeIn(500); 
     } 
    }); 
} 

Hoffe, es hilft!