Datatable Filter With Dropdown In Laravel 9

In this article, we will see a datatable filter with a dropdown in laravel 9. Here we will add data tables with custom filters using fields and searching data without refreshing datatable. we will see the datatable custom dropdown filter on the server-side example.

So, let's see the dropdown filter in laravel 9, laravel 9 custom datatable filter, and the datatable custom filter dropdown server side.

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

Step 1: Install Laravel 9 for Custom Filter with Dropdown

Step 2: Install Yajra Datatable 

Step 3: Add New Column In Users Table

Step 4: Add Record using Tinker

Step 5: Add Routes

Step 6: Create Controller

Step 7: Create Blade file for View


Step 1: Install Laravel 9 for Custom Filter with Dropdown

In this step, we will install a new laravel 9 application using the below command.

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



Step 2: Install Yajra Datatable 

Now, we will install or integrate yajra datatable using the composer command in your terminal.

composer require yajra/laravel-datatables-oracle

This step is optional if you are using Laravel 5.5+. Open the file config/app.php and then add the following service provider.

'providers' => [

After completing the above step, use the following command to publish the configuration & assets.

php artisan vendor:publish --tag=datatables


Step 3: Add New Column in Users Table

Now, we will add a new column in the user table using the migration command.

php artisan make:migration add_approved_column

In the database/migrations/ file path you can find the add_approved_column.php file. And add the below code in that file.

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) {
    public function down()

After changes in the migration file run the below command in your terminal.

php artisan migrate



Step 4: Add Record using Tinker

In this step, we will create dummy records to check our example using tinker.

php artisan tinker

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


Step 5: Add Routes

Now, add a route in the routes/web.php file.

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


Step 6: Create Controller

In this step, we will add the below code in the controller file.

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)
                    ->addColumn('approved', function($row){
                            return '<span class="badge badge-primary">Yes</span>';
                            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%");
        return view('users');



Step 7: Create Blade file for View

Now, create a blade file and add datatable with a dropdown like the below code.

    <title>Datatable Filter With Dropdown In Laravel 9 - Techsolutionstuff</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="" />
    <link href="" rel="stylesheet">
    <script src=""></script>  
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>

<div class="container">
    <h1>Datatable Filter With Dropdown In Laravel 9 - 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>
    <table class="table table-bordered data-table">
                <th width="100px">Approved</th>
<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(),
       = $('input[type="search"]').val()
        columns: [
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'approved', name: 'approved'},


You might also like:


Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.