Jquery ajax提交后刷新数据表

目前，我的dataTable jquery正在从

compact

我的刀片：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);
                        }
                    });  

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

MyTaskController

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

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

在我的

task.blade.php

中使用了这个

include（'admin.taskDatatable'）

因为我的数据表是在这个文件中编码的：

taskDatatable.blade.php

这是我的taskDatatable.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);
                        }
                    });  

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

在ajax成功之后，我正在尝试刷新数据表

Datatable刷新正常，但整个Datatable不再工作，如

分页、搜索文本、显示条目

，这意味着Datatable的所有功能都无法正常工作，但数据已成功刷新

已更新

在尝试了这个代码之后

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

函数刷新表（）{
$（“#dtMaterialDesignExample”）.DataTable（）.ajax.reload（）
}

---

您可以这样做：

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

试试这个

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

您不需要为它创建函数，您可以直接在success函数中调用它

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

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

    }
},

查看有关ajax.reload（）的更多信息

使用ajax进行检查

尝试以下方法：

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

---

我所知道的最好的方法是首先用JS加载数据，也许可以使用ajax调用加载数据。这样，当您执行更新时，只需调用加载数据的函数就可以了。您可以引用一些链接吗？DataTables可能重复警告：table id=dtMaterialDesignExample-无效的JSON响应。有关此错误的更多信息，请参阅给了我一个错误您确定id是“dtMaterialDesignExample”吗？是的，在我已经发布的代码中。id=“dtMaterialDesignExample”请使用数据表编码更新问题检查更新的问题以查看图像和我尝试的内容当您更新问题时，我看到您正在加载表。您的数据来自于从PHP而不是从ajax加载页面。所以

ajax.reload（）函数将继续工作。如果您使用的是laravel，请尝试使用Yajra datatable为您创建JSON。