How to refresh/reload datatable after ajax success function

Question

I have problem refreshing data table after add some data. Also, i used function to fetch data when page loaded. I've been tried datatable function .draw(), but it breaks the pagination limit on the first time. so, i need the solution.

this is the code on the body:

<table id="table-employee" class="table table-hover">
        <thead>             
            <tr>
                <th>No</th>
                <th>Employee ID Number</th>
                <th>Employee Name</th>
                <th>Company Name</th>
                <th>Created Date</th>
                <th>Create By</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="list-data-employee">
            <tr></tr>
        </tbody>
    </table>

here is the code on the script: https://pastebin.com/MU8iFRiq (i used this, because the forum said my code is too much in this thread)

Thank you in advance. *edited: add some detail on body and what i'm doing in script section.

Answer 1

 var options = {data:[]};
 var table = $('#example').DataTable(options);
  function refresh(newData){          
     // Clear all existing data and insert fresh data and redraw datatable.
     table.clear().rows.add([newData]).draw();
   }   

$("#modal-input").on("submit","#form-add-employee", function(){
        $.ajax({
            url:"employee/add/save.json",
            type:"get",
            dataType:"json",
            data:$(this).serialize(),
            success: function(result){
                $("#modal-input").modal("hide");
                alert("Data Saved! New Employee has been add with employee ID Number "+result.employeeModel.employee_number);
             refresh(result);
            }
        });
        return false;
    });

I have created an jsfiddle with working example - http://jsfiddle.net/p74sytjc/