Use checkbox to create a Bulk Delete in Laravel

Use checkbox to create a Bulk Delete in Laravel

Create a Customer Model

Create a Customer Model

Create a Customer Model

Route::get(‘/customers’, [CustomerController::class, ‘customer_list’])->name(‘customers’)

Create a Customer Controller

php artisan make:controller CustomerController

Create a function to display the list of customers inside Customer Controller

public function customer_list() {
$cust_lists = Customer::get();
return view(‘customers’,compact(‘cust_lists’));
}

Create a Customers List page (customers.blade.php)
The customer list page will have three columns (checkbox, first name, lastname)

@extends(‘layouts.app’)
@section(‘content’)
<div class=”row justify-content-center”>
<div class=”col-md-8″>
<div class=”card”>
<div class=”card-header”>
<button class=”btn btn-outline-dark delete_all ml-2 mr-2″ data-url=”{{ url(‘DeleteSel’) }}” title=”Bulk Delete Users”> <i class=”fas fa-users-slash”></i></button>
</div>
<table class=”table table-bordered”>
<thead>
<tr>
<th width=”50px”><input type=”checkbox” id=”master”></th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
@foreach($cust_lists as $cust_list)
<tr id=”tr_{{$cust_list->id}}”>
<td><input type=”checkbox” class=”sub_chk” data-id=”{{$cust_list->id}}”> </td>
<td>{{$cust_list->customer_fname}}</td>
<td>{{$cust_list->customer_lname}}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
@endsection

Add this javascript to check all checkboxes when Select All is checked.

<script>
$(document).ready(function() {
$(‘#master’).on(‘click’, function(e) {
if($(this).is(‘:checked’,true))
{
$(“.sub_chk”).prop(‘checked’, true);
} else {
$(“.sub_chk”).prop(‘checked’,false);
}
});

});
</script>

Add this javascript to delete all selected records.

<script>
$(document).ready(function() {
$(‘#master’).on(‘click’, function(e) {
if($(this).is(‘:checked’,true))
{
$(“.sub_chk”).prop(‘checked’, true);
} else {
$(“.sub_chk”).prop(‘checked’,false);
}
});


$(‘.delete_all’).on(‘click’, function(e) {
var allVals = [];
$(“.sub_chk:checked”).each(function() {
allVals.push($(this).attr(‘data-id’));
});
if(allVals.length <=0)
{ alert(“Please select row.”);}
else {
var join_selected_values = allVals.join(“,”);
$.ajax({
url: $(this).data(‘url’),
type: ‘DELETE’,
headers: {‘X-CSRF-TOKEN’: $(‘meta[name=”csrf-token”]’).attr(‘content’)},
data: ‘ids=’+join_selected_values,
success: function (data) {
if (data[‘success’]) {
$(“.sub_chk:checked”).each(function() {
$(this).parents(“tr”).remove();
$(“#” + data[‘tr’]).slideUp(“slow”);
});
}
},
});
$.each(allVals, function( index, value ) {
$(‘table tr’).filter(“[data-row-id='” + value + “‘]”).remove();
});
}return false;
});

});
</script>

Create route for the delete selected

Route::delete(‘DeleteSel’, [CustomerController::class,’deleteSelected’]);

Create route for the delete selected

public function deleteSelected(Request $request)
{
$ids = $request->ids;
DB::table(“customers”)->whereIn(‘id’,explode(“,”,$ids))->delete();

return response()->json([‘success’=>”Users Deleted successfully.”]);
}

Loading