Обновить данныеТаблица после формы submit in colorbox

Question

У меня есть страница test.php где я беру данные с помощью jQuery DataTables. На той же странице есть кнопка «Добавить примечание», которая открывает форму ajax внутри colorbox. Подача формы работает нормально, но я хочу обновить DataTables, когда запись будет вставлена ​​в мою базу данных.

DataTable:

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

Ajax форма: Обратите внимание, что эта форма нагрузки внутри ColorBox всплывающего окна

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); 
     } 
    }); 
} 

Мое решение: я попробовать различные методы и метод ниже освежить но только в первый раз. Если я хочу отправить форму во второй раз без обновления страницы, форма ajax перестала работать.

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

Answer 1

Если вы загружаете DataTables через его ajax option (который я рекомендовал бы для этого конкретного случая), вы можете перезагрузить свои данные с помощью API.

Во-первых, сохранить экземпляр DataTables в глобальной переменной, а затем вызвать API, используя такую ​​переменную:

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); 
     } 
    }); 
} 

Надеюсь, что это помогает!