Обновить dataTable после отправки ajax

Question

В настоящее время мой dataTable jquery получает данные от compact

My Blade: task.blade.php

                    $.ajax({
                        headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                        url: "{{ route('task_save') }}",
                        method: "POST",
                        data:{
                            proceed:"TRUE",
                            task_title:task_title,
                            weight:weight,
                            desc:desc
                        }, 
                        dataType: "json",
                        success:function(data)
                        {
                            if(data.success.length > 0){
                                refreshTable();
                                toastr.success(data.success[0]);
                                // alert(data.success[0]);              
                            }else{
                                toastr.error(data.error[0]);
                                // alert(data.error[0]);
                            }
                        },
                        error: function(xhr, ajaxOptions, thrownError){
                            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                        }
                    });  

My TaskController

$task_record = TaskModel::orderBy('created_at','desc')
->get();

return view('admin.task', compact('task_record'))->render();

и в моем task.blade.php In используется это include('admin.taskDatatable')

Поскольку моя таблица данных закодирована внутри этого файла: taskDatatable.blade.php

Вот мой taskDatatable.blade.php

<table id="dtMaterialDesignExample" class="table table-striped" cellspacing="0" width="100%">
    <thead>
        <tr>
        <th class="th-sm">Task Title
        </th>
        <th class="th-sm">Task Description
        </th>
        <th class="th-sm">Weight %
        </th>
        <th class="th-sm">Created By
        </th>
        <th class="th-sm">Created Date
        </th>
        <th class="th-sm">Action
        </th>

        </tr>
    </thead>
    <tbody id="taskRcrd">
            @if(count($task_record) > 1)
            @foreach($task_record as $field)
            <tr>
            <td>{{$field->task_title}}</td>
            <td>{{$field->task_desc}}</td>
            <td>{{$field->weight}}</td>
            <td>{{$field->updated_by}}</td>
            <td>{{$field->created_at}}</td>
            <td></td>
            </tr>
            @endforeach
            @else
            <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            </tr>
            @endif
    </tbody>

    </table>

Вот мой refreshTable()

 <script>
 function refreshTable() {
     $("#dtContainer" ).load(" #dtMaterialDesignExample");
 }
 </script>

Я пытаюсь обновить dataTable после успешного выполнения ajax

обновление данных отлично, но все данные больше не работают, как pagination, search text, show entries, это означает, что все функции данных не работают должным образом, но данные успешно обновляются.

ОБНОВЛЕНО

после попытки этого кода

<script>
 function refreshTable() {
$("#dtMaterialDesignExample").DataTable().ajax.reload()
}
</script>

Answer 1

<script>
 function refreshTable() {
   $("#dtMaterialDesignExample").DataTable().ajax.reload()
   }
</script>

Answer 2

Попробуйте это.

function refreshTable(){
    $("#dtMaterialDesignExample").DataTable().ajax.reload();
}

И вам не нужно создавать для него функцию, вы можете напрямую вызвать ее в success function

success:function(data)
{
    if(data.success.length > 0){
        $("#dtMaterialDesignExample").DataTable().ajax.reload();
        toastr.success(data.success[0]);

    }else{
        toastr.error(data.error[0]);

    }
},

checkдополнительная информация о ajax.reload() ajax.reload ()

Проверка с помощью ajax reload-refresh-table-after-event

Answer 3

Попробуйте это:

success: function (data) {
    $('#form').trigger("reset");
}

https://www.tutsmake.com/laravel-5-8-datatables-ajax-crud-tutorial/

Answer 4

Вы можете сделать что-то вроде этого:

function refreshTable(){
var table =  $('#tableId');
table.DataTable().ajax.reload();
}