Working on an HTML file that contains mainly tabular data. Utilized the styling features of Datatables, but looking to customize the color, border color, and size of the select icon next to the show entries option along with increasing the text. The German version is Einträge anzeigen which means show entry.
Current appearance:
https://i.sstatic.net/adVCf.png
Corresponding JavaScript code for reference:
<script>
$(document).ready(function() {
$(".se-pre-con").fadeOut("slow");
$('table thead tr').clone(true).appendTo( 'table thead' );
$('thead tr:eq(1) th').each( function (i) {
if(i > 4){
$(this).hide()
}
})
$('table').DataTable( {
fixedHeader: true,
language: {
processing: "Bitte warten ..",
search: "Suchen",
lengthMenu: "_MENU_ Einträge anzeigen",
info: "_START_ bis _END_ von _TOTAL_ Einträgen",
infoEmpty: "Keine Daten vorhanden",
infoFiltered: "(gefiltert von _MAX_ Einträgen)",
infoPostFix: "",
loadingRecords: "Wird geladen ..",
zeroRecords: "Keine Einträge vorhanden",
paginate: {
first: "Erste",
previous: "Zurück",
next: "Nächste",
last: "Letzte"}
},
initComplete: function () {
this.api().columns().every( function () {
var column = this;
console.log(column.index())
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.header()).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>' )
} );
} );
}
} );
} );
</script>