Как обновить / обновить данные после успешной работы AJAX

Question

У меня проблема с обновлением таблицы данных после добавления некоторых данных. Кроме того, я использовал функцию для извлечения данных при загрузке страницы. Я был опробован датируемой функцией .draw (), но она нарушает ограничение нумерации страниц в первый раз. Итак, мне нужно решение.

это код на теле:

<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>

вот код на скрипте: https://pastebin.com/MU8iFRiq (я использовал это, потому что форум сказал, что мой код слишком много в этой теме)

Спасибо заранее. * Отредактировано: добавить некоторые детали тела и что я делаю в разделе сценариев.

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

Я создал jsfiddle с рабочим примером - http://jsfiddle.net/p74sytjc/