Starting with Datatables Filters

I have added lot of checkbox filters grouped on top of my datatable. For example group cities depends on cities table from db, streets depends on street and so ... The table is populated via ajax.

For example the cities group code:

<div class="form-group">
    <div class="button-group">
        <button type="button" class="btn btn-default btn-sm btn-block dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Streets <span class="caret pull-right"></span>
        </button>
        <ul class="dropdown-menu">
            @foreach($streets as $street)
                <li>
                    <input type="checkbox" class="minimal" id="area-{{ $street->slug }}">
                    <label for="area-{{ $street->slug }}">{{ $street->name }}</label>
                </li>
            @endforeach
        </ul>
    </div>
</div>

And the result:

enter image description here

So is there any way to send this extra filters to server and then based on them to return relevant data?

I want to mention that not all filters are columns from table. (because the table would be too large).

I am using datatable with Laravel and Laravel-Datatable package.

Answers 1

  • Yes You can. It's a little bit tricky but I am going to show You what to do:
    First of all, make sure your datatables js initializing script have "serverSide": true option. Then write a script that catches your filter changes, I give You example for select box:

    $('#some-field').change(function () {
        var search = $(this).val();
        table.columns(2).search(search).draw();
    });
    

    It will search in column number 2, text - search.
    Select boxes actually are the easiest one to do, but as I can see, your table have filters with checkboxes, so You will have to find yourself what to send to backend to get right results.
    If You are using collections You will have some hard times, because collection engine search is pretty silly return strpos($value, $keyword) !== false;, it does not support regex. https://github.com/yajra/laravel-datatables/blob/6.0/src/Engines/CollectionEngine.php#L173 meanwhile query builder is much better https://github.com/yajra/laravel-datatables/blob/6.0/src/Engines/QueryBuilderEngine.php#L395


Related Articles