Hello all. I have a datatable and I have successfully implemented the drop down column filters as shown in this example: https://datatables.net/examples/api/multi_filter_select.html
However, because I am using the server side processing, only the visible options on the first page are populated in the drop down boxes.
I'm using PHP on my server side. How can I pass the options into my JSON and access them in the initComplete function to prefill my select options?
$("#registrations").dataTable( {
"ajax": '{!! route('ajax.registrations') !!}',
processing: true,
serverSide: true,
select: true,
stateSave: true,
columns: [
{data: "product.name"},
{data: "alcohol"},
{data: "reg_type.type"},
{data: "status"},
{data: "reg_date"},
{data: "renew_date"},
],
initComplete: function () {
this.api().columns([0,2,3]).every( function () {
var column = this;
var select = $('<select class="form-control"><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $(this).val();
column.search( this.value ).draw();
} );
// Only contains the *visible* options from the first page
console.log(column.data().unique());
// If I add extra data in my JSON, how do I access it here besides column.data?
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
});