How to get json data after redraw of datatable?

Question

When page load for the first time, I got json object returned from controller. But after deletion of a data it doesn't return json object. I mean, I can access requestTable.ajax.json() after initial load of var requestTable = $('#Request-Table').DataTable({});. But after any event when the table got redrawn, requestTable.ajax.json() gives an error.

My main concern is how to get value of recordsTotal from json object after every event. Can anyone assist me with that?

Routes:

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

Controller:

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);
}

DataTable Function:

// 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);
        }
    });
});

Answer 1

Don't need to send data from delete you can just refresh your table by ajax.reload() function

below i put your code with modify check it's working or not

// 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);
        }
    });
});

above var requestTable so in delete function you can access that and requestTable.ajax.reload(); this function you can use to refresh you table