InfyOm Labs

InfyOm Labs Blog

8 months ago in Tutorial

Multi Column Search box in Datatables with InfyOm Laravel Generator

Lots of people are wondering for implementing a multi-column search with Datatables and specifically how we can implement it with infyom laravel generator. There are several examples for creating a multi-column search with a traditional javascript way. Here are the links for that:

These all examples work great, but still, the missing piece is, there are not examples by which we can implement is laravel service way which is yajra providing. so after some research and reviewing several examples, finally I found out a way, to create a multi-column search with yajra datatables with our generator. Here is the detailed guide to implementing it:

Before moving ahead, generate all scaffold with datatables option true and make sure, your generated scaffold is fully working without any error.

Now, find out following files from your generated files (In my case, My model name is Post, find files, based on your generated files):

  • resources\views\posts\table.blade.php
  • app\DataTables\PostDataTable.php

Now we have to do following changes in both files.

table.blade.php

find out this line,

{!! $dataTable->table(['width' => '100%']) !!}

and add an extra parameter true to table function, like this:

{!! $dataTable->table(['width' => '100%'], true) !!}

What it will do is, it will tell datable HTML builder, that we want to draw a footer. so we can add our search boxes there. For more reference, you can check here.

Let's move to next file.

PostDataTable.php

In your PostDataTable.php, find out html() function, and we need to add one extra parameter to parameters array for builder,

'initComplete' => 'function () {this.api().columns().every(function () {var column = this;var input = document.createElement("input");$(input).appendTo($(column.footer()).empty()).on(\'change\', function () {column.search($(this).val(), false, false, true).draw();});});}'

so it should look like as following,

    public function html()
    {
        return $this->builder()
            ->columns($this->getColumns())
            ->addAction(['width' => '10%'])
            ->ajax('')
            ->parameters([
                'dom' => 'Bfrtip',
                'scrollX' => false,
                'buttons' => [
                    [
                        'extend' => 'print',
                        'text' => 'Print all'
                    ],
                    [
                        'extend' => 'print',
                        'text' => 'Print selected',
                        'exportOptions' => [
                            'modifier' => [
                                'selected' => true
                            ]
                        ]
                    ]
                ],
                'select' => true,
                'initComplete' => 'function () {this.api().columns().every(function () {var column = this;var input = document.createElement("input");$(input).appendTo($(column.footer()).empty()).on(\'change\', function () {column.search($(this).val(), false, false, true).draw();});});}'
            ]);
    }

Here, we are listening for initComplete event of datatable and adding search input to every column footer. Also, we are listening for change event of each text input and searching that column. It will only work when you hit enter as we are listening for change event, if you like to do instance search, then you should listen for keyup event.

That's it. Your search for each column should be working now.

···

Mitul Golakiya

CEO & Founder at InfyOm.com
comments powered by Disqus


© 2017 InfyOm Labs ยท Proudly powered by Canvas