ajax提交后刷新dataTable答案

【问题标题】：Refresh dataTable after ajax submitajax提交后刷新dataTable
【发布时间】：2020-02-06 11:50:03
【问题描述】：

目前我的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);
                        }
                    });

我的任务控制器

$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

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

我正在尝试在ajax成功后刷新dataTable

数据表刷新正常，但整个数据表不再像pagination, search text, show entries那样工作，这意味着数据表的所有功能都无法正常工作，但数据成功刷新。

更新

尝试此代码后

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

【问题讨论】：

我知道的最好的方法是最初用 JS 加载数据，也许你可以使用 ajax 调用来加载数据。这样，当您执行更新时，只需调用加载数据的函数
你可以参考一些链接吗？
reload datatable after ajax success的可能重复

标签： jquery laravel datatable

【解决方案1】：

试试这个。

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.reload()的信息

用ajax检查reload-refresh-table-after-event

【讨论】：

当您更新问题时，我看到您正在加载表。您的数据来自 PHP 而不是从 ajax 加载页面。因此，ajax.reload(); 函数在您的数据表加载了 ajax 时有效。如果您使用 laravel，请尝试使用 Yajra 数据表，它会为您创建 JSON。yajrabox.com/docs/laravel-datatables/master/installation

【解决方案2】：

你可以这样做：

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

【讨论】：

DataTables 警告：表 id=dtMaterialDesignExample - JSON 响应无效。有关此错误的更多信息，请参阅datatables.net/tn/1 给我一个错误
你确定 id 是 'dtMaterialDesignExample'？
在我已经发布的代码中是的。 id="dtMaterialDesignExample'"
请用数据表代码更新问题
检查更新的问题以查看图像以及我尝试过的内容

【解决方案3】：

试试这个：

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

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

【讨论】：