重绘数据表后如何获取json数据？答案

【问题标题】：How to get json data after redraw of datatable?重绘数据表后如何获取json数据？
【发布时间】：2020-03-10 09:49:07
【问题描述】：

第一次加载页面时，我从控制器返回了 json 对象。但是删除数据后它不会返回 json 对象。我的意思是，在初始加载var requestTable = $('#Request-Table').DataTable({}); 后，我可以访问requestTable.ajax.json()。但是在重绘表格后，requestTable.ajax.json() 会报错。

我主要关心的是如何在每次事件后从 json 对象中获取 recordsTotal 的值。任何人都可以帮助我吗？

路线：

Route::group(['prefix' => '/requests'], function () {
    Route::get('/show', [
        'uses' => 'InvitationController@show',
        'as'   => 'requests.show',
    ]);
    Route::delete('/delete/{id}', [
        'uses' => 'InvitationController@destroy',
        'as'   => 'requests.destroy',
    ]);
});

控制器：

public function show()
{
    return Datatables::of(Invitation::query()->whereNull('invitation_token'))->make(true);
}

public function destroy($id)
{
    $invitations = Invitation::where('id', $id)->delete();

    return Response::json($invitations);
}

数据表功能：

// Initial Load
requestTable = $('#Request-Table').DataTable({
        processing: true,
        serverSide: true,
        order: [[ 3, "asc" ]],
        pagingType: "full_numbers",
        ajax: '{{ route('requests.show') }}',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'email', name: 'email' },
            { data: 'created_at', name: 'created_at' },
        ],
        columnDefs: [
            {
                targets: 0,
                visible: false,
                searchable: false
            },
            { 
                targets: 3,
                render: function(data, type, row, meta){
                        return "<button type=\"button\" class=\"delete-request btn btn-sm btn-danger\" data-toggle=\"modal\" data-target=\"#Modal-Request-Delete\" data-id=\""+row.id+"\">Delete Request</button>";
                },
                searchable: false,
                orderable: false
            }
        ]
    });
});

// Delete Request
$('body').on('click', '#Btn-Delete-Request', function () {
    var requestId = $("#Delete-Request").data("id");
    $("#Delete-Request").prop('id', '');
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        type: "delete",
        url: "/requests/delete/"+requestId,
        success: function (data) {
            window.requestTable = $('#Request-Table').dataTable();
            window.requestTable.fnDraw();
        },
        error: function (data) {
            console.log('Error:', data);
        }
    });
});

【问题讨论】：

标签： json laravel yajra-datatable

【解决方案1】：

不需要从删除中发送数据，你可以通过ajax.reload()函数刷新你的表

下面我把你的代码用修改检查它是否工作


// Initial Load

var requestTable ;
requestTable = $('#Request-Table').DataTable({
        processing: true,
        serverSide: true,
        order: [[ 3, "asc" ]],
        pagingType: "full_numbers",
        ajax: '{{ route('requests.show') }}',
        columns: [
            { data: 'id', name: 'id' },
            { data: 'email', name: 'email' },
            { data: 'created_at', name: 'created_at' },
        ],
        columnDefs: [
            {
                targets: 0,
                visible: false,
                searchable: false
            },
            { 
                targets: 3,
                render: function(data, type, row, meta){
                        return "<button type=\"button\" class=\"delete-request btn btn-sm btn-danger\" data-toggle=\"modal\" data-target=\"#Modal-Request-Delete\" data-id=\""+row.id+"\">Delete Request</button>";
                },
                searchable: false,
                orderable: false
            }
        ]
    });
});

// Delete Request
$('body').on('click', '#Btn-Delete-Request', function () {
    var requestId = $("#Delete-Request").data("id");
    $("#Delete-Request").prop('id', '');
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        type: "delete",
        url: "/requests/delete/"+requestId,
        success: function (data) {
            requestTable.ajax.reload();
        },
        error: function (data) {
            console.log('Error:', data);
        }
    });
});

var requestTable 上方，所以在删除功能中您可以访问该功能，requestTable.ajax.reload(); 这个功能可以用来刷新您的表格

【讨论】：