Laravel 8 Datatables Filter with Dropdown

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.

Step 1: Install Laravel 8 For Datatables Filter With Dropdown

Step 2: Integrate Yajra Datatable

Step 3: Add New Column To User's Table

Step 4: Add Record Using Tinker

Step 5: Add Route

Step 6: Create Controller

Step 7: Create Blade File For View

 

Step 1: Install Laravel 8 For Datatables Filter With Dropdown

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

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

 

 

Step 2: Integrate Yajra Datatable

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,
]

 

Step 3: Add New Column To User's Table

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

 

 

Step 4: Add Record Using Tinker

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

php artisan tinker

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

 

Step 5: Add Route

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

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

 

Step 6: Create Controller

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');
    }
}

 

 

Step 7: Create Blade File For View

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 :

RECOMMENDED POSTS

FEATURE POSTS