How to have drop downs populate all options (server-side)
How to have drop downs populate all options (server-side)

I was wondering if anyone could help me get my dropdown selectors to populate all of the possible options? Currently they only populate what options are available on the first page after loading.
$(document).ready(function() {
$('#albums').DataTable( {
"processing": true,
"serverSide": true,
"searching": true,
"ajax": "/api/?format=datatables",
"columns": [
{"data": "type"},
{"data": "name"}],
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
} );
} );
This discussion has been closed.
Answers
Solved:
Needed to remove:
Don't know why but it end up making it work
With server side processing enabled only the page being displayed is in the client (web browser). Its used for large data sets to increase performance by reducing the amount of data at the client. With server side processing enable the better option would be to use search inputs.
Otherwise you would need to provide the data needed for the options in a separate data set which might negate the benefit of server side processing.
With server side processing disabled all the data is at the client allowing the above code to work.
Kevin