Таблица не перезагружается после AJAX успеха

Question

У меня есть таблица некоторых записей. Мне нужно отправить форму. Когда я отправляю форму, мне не нужно перезагружать страницу, мне нужно только увидеть новые данные в этой таблице со старыми записями. В функции успеха я только отображаю значение 1. Если ответ равен 1, то покажите сообщение об успехе и загрузите новые данные с таблицей.

Вот мой код:

$("#cost_center").validate({
    rules: {          
        code: {
            required: true,
        },
        desc: {
            required:true,
        }
    },
    messages: {
        code : {
            required: "não pode ficar em branco"
        },
        desc : {
            required: "não pode ficar em branco"
        }
    },
    errorPlacement: function(error, element) {
        $(element).parents('.form-wrap').append(error);
    },
    submitHandler: function(form) {
        $.ajax({
            url: "{{ url('Organizer/AddCostCenter') }}",
            type: "POST",
            data: $('#cost_center').serialize(),
            success: function( response ) {
                if(response == 1){
                    $("form").trigger("reset");
                    // window.location.reload();
                    var successHtml = '<div class="alert alert-success">'+
                    '<button type="button" class="close" data-dismiss="alert">&times;</button>'+
                    '<strong><i class="glyphicon glyphicon-ok-sign push-5-r"></</strong> '
                    +'Novos registros adicionados com sucesso ...'+
                    // + data.message +
                    '</div>';
                    $('.cost_msg').html(successHtml);
                    // var table =  $('#Cost_table').DataTable({ajax: "response.json"});
                    // table.ajax.reload(null, false);
                    $("a#step4").addClass('active show');
                    $('#tabs-1-4').addClass('show in active');
                    $('#tabs-1-4').show();
                    // $("#tabs-1-4").load(" #tabs-1-4 > *");
                }
            },
        });
    }
});

HTML :

<div class="table-custom-responsive">
    <table id="Cost_table" class="table-custom table-custom-striped table-custom-primary" style="table-layout: fixed;width: 100%;">
        <thead>
            <tr>
                <th>Código</th>
                <th>Descrição</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach($centers as $cent)
            <tr id="cost_{{$cent->id}}">
                <td>{{$cent->code}}</td>
                <td>{{$cent->description}}</td>
                <td>
                    <a href="{{url('Organizer/Edit/Cost/Center/'.$cent->id)}}"><span class="schedule-classic-author-name" style="text-decoration: none;">Edit</span></a> &nbsp;&nbsp;&nbsp;
                    <a href="#"class="deleteCost" id="{{ $cent->id }}" data-token="{{ csrf_token() }}" ><span class="schedule-classic-author-name" style="text-decoration: none;">Remove</span></a>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>