Skip to content

All topics  /  Laravel

Laravel Datatable Dropdown Search Example

Laravel ·

Teams applying “Laravel Datatable Dropdown Search Example” in a production project can use project velocity to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

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

More on this topic