In this article, we will see laravel 8 datatables filter with dropdown, Here we will add data tables custom filter using field and searching data without refresh datatable.

So, let's see dropdown search filter in laravel, dropdown filter in datatable laravel 7/8/9, laravel datatables custom filter, datatables dropdown filter server-side, yajra datatables custom filter, dropdown filter in datatable jquery, dropdown filter on specific column in datatable, jquery datatable column filter dropdown

Using yajra datatable package you can directly list records with pagination, sorting as well as filter features is available. but if you want to add an advance filter like datatable dropdown or dropdown search filter in laravel datatables or yajra datatables filter column then you need to add the below code step by step to integrate yajra datatable dropdown filter with laravel.

 

In this step, we will install laravel 8 using the below code.

composer create-project --prefer-dist laravel/laravel datatable-example

 

 

Now, we need to install or Integrate Yajra Datatable using the composer command.

composer require yajra/laravel-datatables-oracle

After installation of the data table, we need to add providers and alias in config/app.php. This step is optional.

'providers' => [
	....
	Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
	....
	'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]

 

After that, we will add a new column using migration.

php artisan make:migration add_approved_column

database/migrations/add_approved_column.php

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
class AddApprovedColumn extends Migration
{
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->boolean('approved')->default(0);
        });
    }
    public function down()
    {
         
    }
}

Now, Run the migration using the below command.

php artisan migrate

 

 

Now, We will add some records to check our example using tinker.

php artisan tinker

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

 

In this step, we will add routes to the routes/web.php file.

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

 

Now, add the below code to the controller.

<?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('approved', function($row){
                         if($row->approved){
                            return '<span class="badge badge-primary">Yes</span>';
                         }else{
                            return '<span class="badge badge-danger">No</span>';
                         }
                    })
                    ->filter(function ($instance) use ($request) {
                        if ($request->get('approved') == '0' || $request->get('approved') == '1') {
                            $instance->where('approved', $request->get('approved'));
                        }
                        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(['approved'])
                    ->make(true);
        }
        
        return view('users');
    }
}

 

 

Create a blade file and add the below code to the blade file.

<html>
<head>
    <title>Laravel 8 Datatables Filter With Dropdown - Techsolutionstuff</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.25/css/dataTables.bootstrap5.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.25/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.25/js/dataTables.bootstrap5.min.js"></script>

</head>
<body>
     
<div class="container">
    <h1>Laravel 8 Datatables Filter With Dropdown - Techsolutionstuff</h1>
      
    <div class="card">
        <div class="card-body">
            <div class="form-group">
                <label><strong>Approved :</strong></label>
                <select id='approved' class="form-control" style="width: 200px">
                    <option value="">Approved</option>
                    <option value="1">Yes</option>
                    <option value="0">No</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">Approved</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</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.approved = $('#approved').val(),
                d.search = $('input[type="search"]').val()
            }
        },
        columns: [
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'approved', name: 'approved'},
        ]
    });
  
    $('#approved').change(function(){
        table.draw();
    });
      
  });
</script>
</html>

Now, you need to run this application in your browser to see the output.

 

---

You might also like :

• Read Also: Laravel Datatables Localization Example
• Read Also: Laravel Custom Export Button In Datatable
• Read Also: Bootstrap Session Timeout Example In Laravel
• Read Also: How To Integrate Paypal Payment Gateway In Laravel 8