How To Delete Multiple Records using Checkbox in Laravel 8
source link: https://dev.to/codeanddeploy/how-to-delete-multiple-records-using-checkbox-in-laravel-8-4c0n
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How To Delete Multiple Records using Checkbox in Laravel 8
Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/laravel/how-to-delete-multiple-records-using-checkbox-in-laravel-8
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.
![ow-to-delete-multiple-records-using-checkbox-in-laravel-8]https://ecn-storage.s3.us-west-2.amazonaws.com/articles/how-to-delete-multiple-records-using-checkbox-in-laravel-8-QB1cxbU6DHx980.webp?ctm=1631279222)
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');
Enter fullscreen mode
Exit fullscreen mode
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);
}
Enter fullscreen mode
Exit fullscreen mode
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;
}
Enter fullscreen mode
Exit fullscreen mode
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/[email protected]/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/[email protected]/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>
Enter fullscreen mode
Exit fullscreen mode
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.
I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/laravel/how-to-delete-multiple-records-using-checkbox-in-laravel-8 if you want to download this code.
Happy coding :)
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK