Footer column search - only searchable columns

[rickgoemans]

Summary of problem or feature request

According to the docs at Footer column search, I've added a footer row with columns to filter.

The problem of this implementation is that it always adds a column, instead of checking whether the column is searchable or not. I've tried added a console.log('Column: ', column) but I can't find anything usefull to check.

In the following example, the columns quantity, quantity_done and actions should not get a seach column in the footer.

I've checked the docs and Github issues, but can't find anything related. Any suggestions?

Code snippet of problem

Controller:

<?php

namespace App\DataTables;

use App\Models\PurchaseOrder;
use Illuminate\Database\Eloquent\Builder;
use Yajra\DataTables\DataTableAbstract;
use Yajra\DataTables\Html\Builder as HtmlBuilder;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Services\DataTable;

class PurchaseOrdersDataTable extends DataTable
{
    public function dataTable(Builder $query): DataTableAbstract
    {
        return datatables()
            ->eloquent($query)
            ->editColumn('quantity', function (PurchaseOrder $purchaseOrder) {
                return $purchaseOrder->purchaseOrderLines()->sum('quantity');
            })
            ->editColumn('quantity_done', function (PurchaseOrder $purchaseOrder) {
                return $purchaseOrder->purchaseOrderLines()->sum('quantity_done');
            })
            ->editColumn('actions', function (PurchaseOrder $purchaseOrder) {
                return view('layouts.admin.partials.row-actions')
                    ->with([
                        'edit'   => route('admin.purchase-orders.edit', [$purchaseOrder->getKey()]),
                        'delete' => route('admin.purchase-orders.destroy', [$purchaseOrder->getKey()])
                    ]);
            });
    }

    public function query(PurchaseOrder $model): Builder
    {
        return $this->applyScopes($model->newQuery()->with([
            'supplier',
            'purchaseOrderLines',
        ]));
    }

    public function html(): HtmlBuilder
    {
        return $this->builder()
            ->setTableId('purchaseorders-table')
            ->columns($this->getColumns())
            ->minifiedAjax()
            ->dom('Bfrtipl')
            ->orderBy(1)
            // Add footer search row
            ->initComplete("function () {
                this.api().columns().every(function () {
                    var column = this;
                    
                    console.log('Column:', column);
                    
                    var input = document.createElement(\"input\");
                    $(input).appendTo($(column.footer()).empty())
                    .on('change', function () {
                        column.search($(this).val(), false, false, true).draw();
                    });
                });
            }");
    }

    protected function getColumns(): array
    {
        return [
            Column::make('document_nr')
                ->title(__('purchase-orders.document_nr')),
            Column::computed('quantity')
                ->title(__('general.quantity')),
            Column::computed('quantity_done')
                ->title(__('purchase-order-lines.quantity_done')),
            Column::computed('actions')
                ->title(__('general.actions'))
                ->exportable(false)
                ->printable(false)
                ->width(60)
                ->addClass('text-center'),
        ];
    }

    protected function filename(): string
    {
        return 'PurchaseOrders_' . date('YmdHis');
    }
}

View:

@extends('layouts.admin.base')

@section('content')
    <div class="content">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 m-b-30">
                    <h4 class="page-title">
                        @lang('purchase-orders.purchase-orders')
                    </h4>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            @lang('purchase-orders.purchase-orders')
                        </div>
                        <div class="panel-body">
                            {!! $dataTable->table([], true) !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
@endpush

@push('scripts_footer_after')
    <script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
    <script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
    {!! $dataTable->scripts() !!}
@endpush

System details

• Operating System: Mac OS Big Sur 11.0.1 (using Laravel Homestead virtual machine)
• PHP Version: PHP 7.4
• Laravel Version: 8.17.2
• Laravel-Datatables Version:
  • yajra/laravel-datatables: 1.5 (latest)
  • yajra/laravel-datatables-oracle: 9.15.1 (latest)
  • yajra/laravel-datatables-html: 4.36.1 (latest)

[yajra]

As per initComplete docs, we can use settings and json parameter. You can fetch the column definitions from there.

            ->initComplete("function (settings, json) {
                this.api().columns().every(function (index) {
                    var column = this;
                    var colDef = settings['aoColumns'][index];

                    console.log(column, colDef)

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

[rickgoemans]

Thanks for the quick answer. This indeed solved my problem.

I've also managed to change the input detection to on input and add a debounce event(requires lodash) so users don't have to manually perform a action when done typing so I'm happy with the end result.

->initComplete("function (settings, json) {
    this.api().columns().every(function (index) {
        let column = this;
        let columnSettings = settings['aoColumns'][index];
        
        if(columnSettings.bSearchable) {
            let input = document.createElement('input');
            $(input).appendTo($(column.footer()).empty())
                .on('input', _.debounce(function () {
                    let value = $(this).val();
                    
                    column.search(value, false, false, true)
                        .draw();
                }, 1000));
        }
    });
}");