I have adapted the following webpage to my needs and added a bit of code so it now has select2 dropdown menus instead of regular select menus (which I like a LOT better). However I have not been able to figure out how to adapt the code so I can use it only on specific columns instead of on every column. Any guidance would be greatly appreciated.
http://datatables.net/examples/api/multi_filter_select.html (code I adapted)
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var select = $("<select class='searchs2'><option value=''></option></select>")
.appendTo( $(column.header()).append() )
.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>' )});
});
$(".searchs2").select2();
}
Also - if there is an option to hide the 'generic' search box I would like to hide it on top as well and just provide these select2 boxes. Thank you.
(edited to update the fix so select2 would initialize for every dropdown box, last one was not initializing)
You can use columns([array])
. Instead of
this.api().columns().every( function () {
and you want to perform the search on the column 1,2,5 and 6 only :
this.api().columns([1,2,5,6]).every( function () {
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With