Laravel Datatable Dropdown Search Example

Laravel 6 , Laravel , Laravel 7

Nicesnippets

17517

19-06-2020


Laravel Datatable Dropdown Search Example

Hi Guys,

In this Tutorial,I will learn you how to ue datatable dropdown search in laravel.You can easy and simple use datatable dropdown filter in laravel.

We would love to share with you how to add custom date filter and custom input search field and without display data without page refresh on datatables.

Laravel yajra datatables provide default global search, in that search it will search entire row of table. But if you need to add for only one specific column like for created date search with datepicker or status with dropdown then you must have to implement custom filtering in your datatable.

DataTables is a plug-in for the jQuery Javascript library. Laravel Yajra DataTables Package provide many functionalities like searching, sorting, pagination on table.

Step 1: Install Laravel 7


In this step,you can install laravel 7 application. So run bellow command and get clean fresh laravel 7 application.

composer create-project --prefer-dist laravel/laravel blog

Step 2: Install Yajra Datatable

We need to install yajra datatable package.so you can install using following command:

composer require yajra/laravel-datatables-oracle

After that you need to set providers and alias.

.....

'providers' => [

....

Yajra\DataTables\DataTablesServiceProvider::class,

]

'aliases' => [

....

'DataTables' => Yajra\DataTables\Facades\DataTables::class,

]

.....

Step 3: Add Dummy Records

we will create some dummy users using tinker factory. so let's create dummy records using bellow command:

php artisan tinker

factory(App\User::class, 200)->create();

Step 4: Add Route

In this step,you can create route for datatale layout file data.

routes/web.php

Route::get('users', ['uses'=>'UserController@index', 'as'=>'users.index']);

Step 5: Create Controller

In this step,you can create to usercontroller.this controller mange to getting data and layout for datatable.

app/Http/Controllers/UserController.php

namespace App\Http\Controllers;

use App\User;

use Illuminate\Http\Request;

use DataTables;

class UserController extends Controller

{

/**

* Display a listing of the resource.

*

* @return \Illuminate\Http\Response

*/

Public function index(Request $request)

{

if ($request->ajax()) {

$data = User::select('*');

return Datatables::of($data)

->addIndexColumn()

->addColumn('status', function($row){

if($row->status){

return '<span class="badge badge-primary">Active</span>';

}else{

return '<span class="badge badge-danger">Deactive</span>';

}

})

->filter(function ($instance) use ($request) {

if ($request->get('status') == '0' || $request->get('status') == '1') {

$instance->where('status', $request->get('status'));

}

if (!empty($request->get('search'))) {

$instance->where(function($w) use($request){

$search = $request->get('search');

$w->orWhere('name', 'LIKE', "%$search%")

->orWhere('email', 'LIKE', "%$search%");

});

}

})

->rawColumns(['status'])

->make(true);

}

return view('users');

}

}

Step 6: Create View

In Last step, let's create users.blade.php for layout and we will write design code here and put following code:

resources/views/users.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel Datatable Dropdown Search - Nicesnippets.com</title>

<meta name="csrf-token" content="{{ csrf_token() }}">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">

<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>

<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>

</head>

<body>

<div class="container mt-4">

<div class="card">

<div class="card-header">

<h2>Laravel Datatable Dropdown Search - Nicesnippets.com</h2>

</div>

<div class="card-body">

<div class="row">

<div class="col-md-4">

<div class="form-group">

<label><strong>Status :</strong></label>

<select id=>' class="form-control">

<option value="">--Select status--</option>

<option value="0">Active</option>

<option value="1">Deactive</option>

</select>

</div>

</div>

</div>

<table class="table table-bordered data-table">

<thead>

<tr>

<th>No</th>

<th>Name</th>

<th>Email</th>

<th width="100px">Status</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

</div>

</div>

</body>

<script type="text/javascript">

$(function () {

var table = $('.data-table').DataTable({

processing: true,

serverSide: true,

ajax: {

url: "{{ route('users.index') }}",

data: function (d) {

d.status = $('#status').val(),

d.search = $('input[type="search"]').val()

}

},

columns: [

{data: 'id', name: 'id'},

{data: 'name', name: 'name'},

{data: 'email', name: 'email'},

{data: 'status', name: 'status'},

]

});

$('#status').change(function(){

table.draw();

});

});

</script>

</html>

Now you can run laravel applicaton.below this command

php artisan serve

Now you can open bellow url on your browser:

http://localhost:8000/users

It will help you.....


Recommended Posts