如何在数据表重绘后得到json数据?

How to get json data after redraw of datatable?

第一次加载页面时,我从控制器获得了 json 对象 returned。但在删除数据后,它不会 return json 对象。我的意思是,我可以在初始加载 var requestTable = $('#Request-Table').DataTable({}); 后访问 requestTable.ajax.json()。但是在重绘 table 的任何事件之后,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);
        }
    });
});

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

刷新你的table

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


// 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(); 这个功能你可以用来刷新你 table