ajax提交后刷新dataTable

Posted 2023-03-14

【中文标题】ajax提交后刷新dataTable

【英文标题】：Refresh dataTable after ajax submit

【发布时间】：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" >
    <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的可能重复

【参考方案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/