Jquery Datatable functions not working properly after reload

Question

I am using Jquery Datatable for my plugin. Below is the code sample:

$(function() {
    $( "#tab-per" ).DataTable();
});

$(function() {
    var form = document.getElementById("postme");
    $('form#postme').on('submit', function(e) {
            $.post('cnp.php?hal=103.sv', $(this).serialize(), function (data) {
            alert('Data perusahaan sukses disimpan !');
            $( "#tab-per" ).load( "cnp.php?hal=103 #tab-per" );
            $( "#tab-per" ).DataTable();
            form.reset();
            // This is executed when the call to mail.php was succesful.
            // 'data' contains the response from the request
            }).error(function() {
            alert('Mohon maaf ada kesalahan')
            // This is executed when the call to mail.php failed.
           });
          e.preventDefault();                   
    });
});

The problem is, datatable pagination and search is not working anymore when I click the submit button to save data to my database after the table gets refreshed.

Answer 1

you can do this:

 var tab-per-table;
 $(function() {
    tab-per-table=$(function() {
        $( "#tab-per" ).DataTable();
    });
 });
//when you post success,you can delete.$( "#tab-per" ).DataTable(),just do:
 tab-per-table.draw();