Problem: Dropdown in status column does not show the third option when a default filter is enabled.
I am using DataTables server side processing. In the status column of the table, I have a dropdown in the header, which has three options (all, completed and in process). This dropdown works perfectly when I don't have a default filter enabled. However, by default I need to only show the records which have the status "in process", so I added a default search value for this, which works, but then when I click on the dropdown menu, only 2 options are there: "all" and "in process".
How can I have a default filter enabled AND the correct dropdown?
I have tried googling this but I haven't found any questions which match what I need. I have tried moving the different parts of my code into different places and playing around with stateSave, but nothing seems to fix this.
index.blade.php:
<div class="row">
<div id="tbl" class="col-sm-12">
<table id="overview" class="cell-border display">
<thead class="tbl-top">
<tr>
<th>Retourennummer</th>
<th>Auftragsnummer</th>
<th>Datum</th>
<th>Zustand</th>
<th>Aktionen</th>
</tr>
</thead>
<tfoot class="tbl-bottom">
<tr>
<th>Retourennummer</th>
<th>Auftragsnummer</th>
<th>Datum</th>
<th>Zustand</th>
<th>Aktionen</th>
</tr>
</tfoot>
</table>
</div>
</div>
<script>
$(document).ready(function () {
var startingStatus = 'angelegt';
var table = $('#overview').DataTable({
"processing": true,
"serverSide": true,
"searching": true,
ajax: '{!! route('data') !!}',
"columns": [
{data: 'id', name: 'id'},
{data: 'orderNr', name: 'orderNr'},
{data: 'created_at', name: 'created_at'},
{data: 'status.status_description', name: 'status.status_description'},
{data: 'action', name: 'action', orderable: false, searchable: false}
],
"search": {
"search": "angelegt"
},
"dom": "<'row'<'col-sm-4'l><'col-sm-8'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-6'i><'col-sm-6'p>>",
"paging": true,
"info": true,
"autoWidth": true,
"language": {
"paginate": {
"previous": "Vorherige Seite",
"next": "Nächste Seite"
},
"search": "Suche:",
"info": "Zeige _START_ - _END_ von insgesamt _TOTAL_ Einträgen",
"lengthMenu": 'Einträge pro Seite' + '<br>' +
'<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">' +
'<option selected value="10">10</option>' +
'<option value="20">20</option>' +
'<option value="30">30</option>' +
'<option value="40">40</option>' +
'<option value="50">50</option>' +
'<option value="-1">Alle</option>' +
'</select>'
},
initComplete: function () {
this.api().columns([3]).every(function () {
var column = this;
var select = $('<select class="myInput"><option value="">alle</option></select>')
.appendTo($(column.header()))
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
/**
* Once an option in the drop-down next to status has been selected, you can read the text in
* the drop-down
*/
column.data().unique().sort().each(function (d, j) {
if (startingStatus === d) {
select.append('<option SELECTED value="' + d + '">' + d + '</option>')
} else {
select.append('<option value="' + d + '">' + d + '</option>')
}
});
/**
* When clicking on drop-down next to status, the sorting function is not activated
*/
$(select).click(function (e) {
e.stopPropagation();
});
/**
* When drop-down is clicked on, search field is cleared. Otherwise search field must be
* manually cleared before using the drop-down.
*/
$(select).on('click', function () {
table.search(" ").draw();
});
});
}
});
});
</script>
I didn't have this problem when I was using client side processing. I don't understand why I am now having this issue with server side processing.
If I need to clarify anything or provide more code, please let me know.
