Datatable dropdown box list instead of search text box

harit

is it possible to change search text box. i want to select box instead of text box

colin

Hi @harit ,

There's isn't one out of the box, so you'll need to create one. The dom can be used to remove the current search box, then you can create your own dropdown to initiate a search instead. This example here creates dropdown searches in the footer, but you could use that code as a template,

Cheers,

Colin

harit

thanks for the replay colin

Caspian deConwy

Hi,

I've used the code in the example above to create a dropdown for a date column. The column itself has a Y-m-d format but in the drop down I only want to have Y-m to filter for months.

If I just use the code as is, in the dropdown each individual date will appear.

Therefore I changed the code from

column.data().unique().sort().each(function(d, j) {
  select.append('<option value="' + d + '">' + d + '</option>');
});

to

column.data().unique().sort().each(function(d, j) {
  select.append('<option value="' + d.substr(0,7) + '">' + d.substr(0,7) + '</option>');
});

This will cut the day from the date and I get the desired format but I will get for instance 10 times the value 2019-10 in the dropdown as initially there are 10 different days in the database.

To limit this to 1 appearance per month I changed the code as follows:

var last = ''; // save the last used date
column.data().unique().sort().each(function(d, j) {
  if(d.substr(0,7) != last) { // check if current date is same as last used date
    select.append('<option value="' + d.substr(0,7) + '">' + d.substr(0,7) + '</option>');
    last = d.substr(0,7); //update last used date
  }
});

Is this the best way to do this or is there a better solution?

Thank you.
Caspian

kthorngren

@Caspian deConwy You certainly do need to keep track of the dates you've placed in the select list when doing something like this. Your code looks good.

Kevin

Caspian deConwy

Thanks