Custom Filter in Yajra DataTable

How to add custom filter in Yajra DataTable

Laravel Yajra Datatable package is a Php version of jQuery DataTable that makes it easier for handling server-side work but JavaScript work is the same as the jQuery version of the datatables js.

Yajra DataTables provides an amazing interface for filtering, sorting, and searching with ajax pagination. It’s very useful to handle large tables. But sometimes we need more filter options that are not available by default in the data table but there are options and methods to perform those actions. Here we will learn how to add a custom filter in Laravel Yajra datatables.

Here, in my case, I want a dropdown list of status, and I want to filter the data according to the selected status from the dropdown, let see how can we do that with Laravel Yajra DataTable.

Let’s first create a dropdown list of status

<select id="status_filter" name="status">

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

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

<option value="2">Inactive</option>

<option value="3">Suspended</option>

</select>

now, lets write some javascript to initialize Datatable, let’s say, you have a table with ID “mytable”

var table = $('#mytable').DataTable({

            processing: true,
            serverSide: true,
            ajax: {
                url:"{{ route('your_route') }}",
                data: function(d){
                    d.statusCode = $('#status_filter').val() //this is the main point
                }
            },

            columns: [
            	// add your columns here. bellow are my table columns
                {data: 'checkbox', name: 'checkbox', orderable: false, searchable: false},
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
                {data: 'status', name:'status'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
              ]
            });

We just initialized datatable, and now we have to refresh the table data each time dropdown changes.

 $('#status_filter').on('change', function(){

  	table.draw();

  });
  

okay, javascript work is done, now comes the server-side part, lets do that too.

So lets says I have a controller ListController.php with a method name Index()

public function index(Request $request) {


if ($request->ajax()) {


            $data = User::latest();
            
            return Datatables::of($data)
            
            //this is main point, this is how we can add filter
            ->filter(function ($instance) use ($request) {
                if($request->has('statusCode') && $request->statusCode!=null){
                    return $instance->where('status', $request->statusCode);
                }
            })

            ->addColumn('checkbox', function ($data) {
                return '<input id="'.$data->id.'" name="ids" type="checkbox" />';
              })

            ->addColumn('action', function($data){
                $btn = '<a data-="" href=". route(" users.edit="">id) .' class="edit btn btn-primary btn-sm"><i class="fa fa-edit"></i></a>';
                $btn = $btn.Form::open(array('method'=>'DELETE', 'route' => array('users.destroy',"$data->id"), 'class'=>'delete-form', 'style'=>'display: inline-block;')) .
                      '<button class="delete_btn btn btn-sm btn-danger" data-id="'.$data->id.'" type="submit"><i aria-hidden="true" class="fa fa-trash"></i></button>'.
                        Form::close();
                 return $btn;

            })
            
            ->addColumn('status', function($row){
                if($row->status == '1'){
                   return '<span class="badge badge-primary">Pending</span>';
                }elseif($row->status == '2'){
                   return '<span class="badge badge-success">Active</span>';
                }elseif($row->status == '3'){
                    return '<span class="badge badge-info">InActive</span>';
                }elseif($row->status == '4'){
                    return '<span class="badge badge-danger">Suspended</span>';
                }else{
                    return false;
                }
           })

                      

         ->rawColumns(['action','checkbox','status'])
            ->make(true);

        }
}

That’s all. I shared a short story because i assumed, you know how to use yajra data table. So I just shared, to add a custom filter in Laravel yajra DataTables.

You can always post a comment if you want more. I will be happy to help you!