As we know, It's a very important to time consuming task to delete records one by one when there are too many records in the MySQL database table. So in this tutorial i will show you how to remove ro delete multiple rows or records with select checkboxes using jquery ajax in laravel 5.6 application.
so basically, in this example, we will create "categories" table and model. Also you need to add some dummy records on mysql table. then we will display on one page all categories with checkbox. Then you can simply remove all records and also select checkboxes and delete it. So just follow few steps and you will get full example.
Step 1: Create Database Table
In first step, we need to create categories table using laravel 5.6 migration. So let's create table like as bellow code:
2017_09_02_052113_create_categories_table.php
Schema::create('categories', function (Blueprint $table) {
$table->increments('id');
$table->string('category_name');
$table->text('category_details');
$table->timestamps();
});
Now you can run migration and also make sure you need to add some dummy data.
Step 2: Create Category.php Model
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Category extends Model
{
protected $fillable = [
'category_name','category_details'
];
}
Step 3: Add New Routes In web.php
Route::get('category', 'CategoryController@index');
Route::delete('category/{id}', ['as'=>'category.destroy','uses'=>'CategoryController@destroy']);
Route::delete('delete-multiple-category', ['as'=>'category.multiple-delete','uses'=>'CategoryController@deleteMultiple']);
Step 4: Create New Controller CategoryController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Category;
class CategoryController extends Controller
{
public function index(Request $request){
$categories=Category::get();
return view('categories',compact('categories'));
}
public function destroy(Request $request,$id){
$category=Category::find($id);
$category->delete();
return back()->with('success','Category deleted successfully');
}
public function deleteMultiple(Request $request){
$ids = $request->ids;
Category::whereIn('id',explode(",",$ids))->delete();
return response()->json(['status'=>true,'message'=>"Category deleted successfully."]);
}
}
Step 5: Create New Blade File categories.blade.php
<!DOCTYPE html>
<html>
<head>
<title>PHP Laravel 5.6 - How to delete multiple row with checkbox using Ajax? - HDTuto.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-confirmation/1.0.5/bootstrap-confirmation.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div class="container">
<h3>PHP Laravel 5.6 - How to delete multiple row with checkbox using Ajax? - HDTuto.com</h3>
@if ($message = Session::get('success'))
<div class="alert alert-success">
<p>{{ $message }}</p>
</div>
@endif
<button style="margin: 5px;" class="btn btn-danger btn-xs delete-all" data-url="">Delete All</button>
<table class="table table-bordered">
<tr>
<th><input type="checkbox" id="check_all"></th>
<th>S.No.</th>
<th>Category Name</th>
<th>Category Details</th>
<th width="100px">Action</th>
</tr>
@if($categories->count())
@foreach($categories as $key => $category)
<tr id="tr_{{$category->id}}">
<td><input type="checkbox" class="checkbox" data-id="{{$category->id}}"></td>
<td>{{ ++$key }}</td>
<td>{{ $category->category_name }}</td>
<td>{{ $category->category_details }}</td>
<td>
{!! Form::open(['method' => 'DELETE','route' => ['category.destroy', $category->id],'style'=>'display:inline']) !!}
{!! Form::button('Delete', ['class' => 'btn btn-danger btn-xs','data-toggle'=>'confirmation','data-placement'=>'left']) !!}
{!! Form::close() !!}
</td>
</tr>
@endforeach
@endif
</table>
</div>
</body>
<script type="text/javascript">
$(document).ready(function () {
$('#check_all').on('click', function(e) {
if($(this).is(':checked',true))
{
$(".checkbox").prop('checked', true);
} else {
$(".checkbox").prop('checked',false);
}
});
$('.checkbox').on('click',function(){
if($('.checkbox:checked').length == $('.checkbox').length){
$('#check_all').prop('checked',true);
}else{
$('#check_all').prop('checked',false);
}
});
$('.delete-all').on('click', function(e) {
var idsArr = [];
$(".checkbox:checked").each(function() {
idsArr.push($(this).attr('data-id'));
});
if(idsArr.length <=0)
{
alert("Please select atleast one record to delete.");
} else {
if(confirm("Are you sure, you want to delete the selected categories?")){
var strIds = idsArr.join(",");
$.ajax({
url: "{{ route('category.multiple-delete') }}",
type: 'DELETE',
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
data: 'ids='+strIds,
success: function (data) {
if (data['status']==true) {
$(".checkbox:checked").each(function() {
$(this).parents("tr").remove();
});
alert(data['message']);
} else {
alert('Whoops Something went wrong!!');
}
},
error: function (data) {
alert(data.responseText);
}
});
}
}
});
$('[data-toggle=confirmation]').confirmation({
rootSelector: '[data-toggle=confirmation]',
onConfirm: function (event, element) {
element.closest('form').submit();
}
});
});
</script>
</html>
Now you can run and check it. I hopw you found your best....
Do you like below Tutorials ?
- Angular Use CKEditor Example Tutorial
- How to Use Multiple Select Dropdown in Laravel?
- Angular 9 Image Upload with Crop Example
- Files Upload on Button Click in PHP Dropzone Example
- PHP Dropzone Allow only One File to Upload Example
- PHP Dropzone Allow only Images to Upload Example
- PHP Dropzone Delete Uploaded File Example
- Livewire CRUD Laravel 7 Example