Table of contents
In this post, I will share how to implement multiple delete records using the checkbox in Laravel 8. Sometimes you need to add this functionality to support multi-action in one click so that we don't need to click the button one by one. In this example I'm using a multi-delete operation this is just an idea you can use any you want like approving the user posts, deactivating, or activating in multi-action. I'm using ajax for this so that we don't need to refresh the page while a request to the server with Sweetalert 2 confirmation.
Â
Â
By the way in this example, I used my created jQuery plugin TableCheckAll it will help us to multi-check at one click the table checkbox. For more details about the plugin kindly visit the tutorial and download it.
Â
In this example, we have a controller, model, route, and blade. Just continue to read the below steps:
Â
Route
Route::post('/posts/multi-delete', [PostsController::class, 'multiDelete'])->name('posts.multi-delete');Â
Controller Method for Multi-Delete
In your controller just copy the method below. In this example my controller name is PostsController.
/**
* Multi-remove specified resources from storage
*
* @param Request $request
* @return \Illuminate\Http\Response
*/
public function multiDelete(Request $request)
{
Post::whereIn('id', $request->get('selected'))->delete();
return response("Selected post(s) deleted successfully.", 200);
}Â
Model
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
protected $fillable = [
'title',
'description',
'body'
];
use HasFactory;
}Â
Â
Blade File
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Delete Record using Ajax in Laravel 8 - codeanddeploy.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="plugins/Jquery-Table-Check-All/dist/TableCheckAll.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#posts-table").TableCheckAll();
$('#multi-delete').on('click', function() {
var button = $(this);
var selected = [];
$('#posts-table .check:checked').each(function() {
selected.push($(this).val());
});
Swal.fire({
icon: 'warning',
title: 'Are you sure you want to delete selected record(s)?',
showDenyButton: false,
showCancelButton: true,
confirmButtonText: 'Yes'
}).then((result) => {
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
$.ajax({
type: 'post',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: button.data('route'),
data: {
'selected': selected
},
success: function (response, textStatus, xhr) {
Swal.fire({
icon: 'success',
title: response,
showDenyButton: false,
showCancelButton: false,
confirmButtonText: 'Yes'
}).then((result) => {
window.location='/posts'
});
}
});
}
});
});
$('.delete-form').on('submit', function(e) {
e.preventDefault();
var button = $(this);
Swal.fire({
icon: 'warning',
title: 'Are you sure you want to delete this record?',
showDenyButton: false,
showCancelButton: true,
confirmButtonText: 'Yes'
}).then((result) => {
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
$.ajax({
type: 'post',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
url: button.data('route'),
data: {
'_method': 'delete'
},
success: function (response, textStatus, xhr) {
Swal.fire({
icon: 'success',
title: response,
showDenyButton: false,
showCancelButton: false,
confirmButtonText: 'Yes'
}).then((result) => {
window.location='/posts'
});
}
});
}
});
})
});
</script>
</head>
<body>
<div class="container mt-5">
@if(Session::get('success', false))
<?php $data = Session::get('success'); ?>
@if (is_array($data))
@foreach ($data as $msg)
<div class="alert alert-success" role="alert">
<i class="fa fa-check"></i>
{{ $msg }}
</div>
@endforeach
@else
<div class="alert alert-success" role="alert">
<i class="fa fa-check"></i>
{{ $data }}
</div>
@endif
@endif
<button class="btn btn-danger" id="multi-delete" data-route="{{ route('posts.multi-delete') }}">Delete All Selected</button>
<table class="table table-striped" id="posts-table">
<thead>
<tr>
<th scope="col"><input type="checkbox" class="check-all"></th>
<th scope="col">Title</th>
<th scope="col">Description</th>
<th scope="col">Body</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
@foreach($posts as $post)
<tr>
<td><input type="checkbox" class="check" value="{{ $post->id }}"></td>
<td>{{$post->title}}</td>
<td>{{$post->description}}</td>
<td>{{$post->body}}</td>
<td>
<form method="post" class="delete-form" data-route="{{route('posts.destroy',$post->id)}}">
@method('delete')
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</body>
</html>Â
In this line <script src="plugins/Jquery-Table-Check-All/dist/TableCheckAll.js"></script> don't forget to download the TablecCheckAll Plugin I mention above, create a plugins/ folder to your public/ directory then put the downloaded folder for Jquery-Table-Check-All.
Â
That's it. I hope it helps. Thank you for reading :)
Read next
