PHP Laravel 7.x and 6.x - How to delete multiple row with checkbox using Ajax?

June 17, 2018 | Category : Laravel 5.6 Laravel 5.5 Laravel 5 MySQL Ajax JQuery Laravel PHP

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....