Leonardo Lima
Leonardo Lima

Reputation: 21

YADCF multiselect datatables filter with icons

I have a challenge: I want to filter my datatable with by a specific column, but in this column I don't have texts, insted this, I have icons, a list of icons.

This icons represents some visual values, importants for end-users.

There is my table for exemplify

enter image description here

I'm using and testing YADCF plugins with: Datatables, Select2, AdminLTE, in a Laravel project.

Follow the code bellow:

HTML

<table class="table table-bordered table-hover datatables dtr-inline" id="usersTable">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Razão Social</th>
                                <th>E-mail</th>
                                <th>Contrato(s)</th>
                                <th>Serviços(s)</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($clients as $client)
                                <tr>
                                    <td>{{ $client->id }}</td>
                                    <td><a style="color: black"
                                            href="/client/show/{{ $client->id }}">{{ $client->razaoSocial }}</a></td>
                                    <td>{{ $client->email }}</td>
                                    <td>
                                        @if ($client->contract)
                                            @if ($client->contract->types)
                                                @foreach (json_decode($client->contract->types) as $type)
                                                    @if ($type == 'lcEquipamento')
                                                        <i class="fas fa-laptop"></i>
                                                    @endif
                                                    @if ($type == 'lcServidor')
                                                        <i class="fas fa-server"></i>
                                                    @endif
                                                    @if ($type == 'prsServico')
                                                        <i class="fas fa-exclamation"></i>
                                                    @endif
                                                    @if ($type == 'outsourcing')
                                                        <i class="fas fa-globe"></i>
                                                    @endif
                                                    @if ($type == 'bckCloud')
                                                        <i class="fas fa-cloud"></i>
                                                    @endif
                                                    @if ($type == 'serverCloud')
                                                        <i class="fas fa-exclamation"></i>
                                                    @endif
                                                    @if ($type == 'colocation')
                                                        <i class="fas fa-exclamation"></i>
                                                    @endif
                                                    @if ($type == 'drive')
                                                        <i class="fas fa-download"></i>
                                                    @endif
                                                @endforeach
                                            @else
                                                Nenhum contrato ativo.
                                            @endif
                                        @else
                                            Nenhum contrato ativo.
                                        @endif
                                    </td>
                                    <td>
                                        @if ($client->contract)
                                            @if ($client->contract->services)
                                                @foreach (json_decode($client->contract->services) as $service)
                                                    @if ($service == 'avulso')
                                                        <i class="fas fa-exclamation"></i>
                                                    @endif
                                                    @if ($service == 'n1')
                                                        <i class="fas fa-exclamation"></i>
                                                    @endif
                                                    @if ($service == 'n2')
                                                        <i class="fas fa-exclamation"></i>
                                                    @endif
                                                    @if ($service == 'spla')
                                                        <i class="fab fa-windows"></i>
                                                    @endif
                                                    @if ($service == 'bitdefender')
                                                        <i class="fas fa-exclamation"></i>
                                                    @endif
                                                    @if ($service == 'trendMicro')
                                                        <i class="fas fa-exclamation"></i>
                                                    @endif
                                                    @if ($service == 'firewall')
                                                        <i class="fas fa-exclamation"></i>
                                                    @endif
                                                    @if ($service == 'supportServer')
                                                        <i class="fas fa-exclamation"></i>
                                                    @endif
                                                    @if ($service == 'supportDesktop')
                                                        <i class="fas fa-exclamation"></i>
                                                    @endif
                                                @endforeach
                                            @else
                                                Nenhum serviço contratado.
                                            @endif
                                        @else
                                            Nenhum contrato ativo.
                                        @endif
                                    </td>
                                    <td align="center">
                                        <a class="fas fa-fw fa-edit" href="/client/show/{{ $client->id }}"></a>
                                        @if (!$client->contract)
                                            <a style="color: rgb(168, 167, 167)" class="fas fa-file-signature"
                                                href="/client/{{ $client->id }}/contract/create"></a>
                                        @elseif(!$client->contract->types && !$client->contract->services)
                                            <a style="color: rgb(168, 167, 167)" class="fas fa-file-signature"
                                                href="/client/{{ $client->id }}/contract/show/{{ $client->contract->id }}"></a>
                                        @else
                                            <a style="color: darkorange" class="fas fa-file-signature"
                                                href="/client/{{ $client->id }}/contract/show/{{ $client->contract->id }}"></a>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

JS

<script>
        $(function() {
            var table = $(".datatables").DataTable({
                "dom": "<'row'<'col-sm-12 col-md-6'B>>" +
                    "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                "lengthMenu": [5, 10, 25, 50, 75, 100],
                "order": [0, 'desc'],
                buttons: [{
                        extend: 'copyHtml5',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'csv',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'excelHtml5',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'pdfHtml5',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'print',
                        exportOptions: {
                            columns: ':visible'
                        }
                    },
                    {
                        extend: 'colvis',
                        text: 'Filtrar Colunas'
                    },
                ],
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.11.4/i18n/pt_br.json"
                },
            });
            yadcf.init(table, [{
                column_number: 4,
                filter_type: 'multi_select',
                select_type: 'select2',
                filter_default_label: 'Filtrar Serviços',
                html_data_type: 'text',
                select_type_options: {
                    width: '100%',
                    allowClear: true,
                    "language": {
                        "noResults": function() {
                            return "Nenhum resultado encontrado.";
                        }
                    }
                },
                filter_reset_button_text: false
            }, {
                column_number: 3,
                filter_type: 'multi_select',
                select_type: 'select2',
                filter_default_label: 'Filtrar Contratos',
                html_data_type: 'text',
                select_type_options: {
                    width: '100%',
                    allowClear: true,
                    "language": {
                        "noResults": function() {
                            return "Nenhum resultado encontrado.";
                        }
                    }
                },
                filter_reset_button_text: false
            }]);
        });
    </script>

Upvotes: 1

Views: 117

Answers (0)

Related Questions