Reputation: 21
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
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