author-img

Mitul Golakiya's Posts

CEO & Founder

post

Another minor update release for InfyOm Laravel Generator with some enhancement for datatables and few bug fixes.

This release contains datatable duplication script & CSS fixes with partial files support for datatables js and CSS files.

Also, it contains a few bug fixes about save JSON model schema, text area field generation and few more.

You can find full release notes here.

September 30, 20161 minuteauthorMitul Golakiya
post

Lots of people are wondering about 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 no examples by which we can implement a laravel service which yajra provides. 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 scaffolds 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 the 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 the datatable 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 a 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 follows,

 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 the `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 a 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.

March 04, 20172 minutesauthorMitul Golakiya