How To Get Json Data After Redraw Of Datatable?
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' => '[email protected]',
'as' => 'requests.show',
]);
Route::delete('/delete/{id}', [
'uses' => '[email protected]',
'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
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
Related Questions
- → I can't convert Json to string [OctoberCms]
- → Uncaught TypeError Illegal invocation when send FormData to ajax
- → Laravel Send URL with JSON
- → how to write react component to construct HTML DOM
- → AJAX folder path issue
- → Chaining "Count of Columns" of a Method to Single Query Builder
- → Laravel - bindings file for repositories
- → Good solution to work with rest-api like SPA with redux?
- → getting the correct record in Angular with a json feed and passed data
- → Transformer usage on laravel/dingo API
- → Google options Page not saving - Javascript
- → Ember.js JSON API confusion
- → How can I query Firebase for an equalTo boolean parameter?