One Column Filtering in Header

robov

I would like to add a column filtering option next to the search box. This column is autofilled with one of the columns from the table. Any suggestion how to do this ?

rhino

Is it a dropdown select that you are autofilling?

robov

rhino, yes that is what I am trying to do. Made it work with the sample in the footer. But I need it outside the footer, and only 1 selected column

rhino

How's this look? (demo)

robov

Thank looks amazing... !!
but the filtering does not work yet or am I missing something

rhino

Um. Refresh and see if it works. I made some changes after I posted.

If that doesn't work, are you using IE? I've noticed that input doesn't work correctly on live.datatables.net when using IE :(

rhino

Heh, sorry about that. Try this one!

robov

AMAZING !!
Exactly.... thank you...
Just one more (maybe stupid) question. When I implemented this, and used my ajax source it no longer seemed to fill the dropdown.

rhino

My first idea would be to place the creation of the dropdown into the initComplete callback option. Something along the lines of:

var theTable = $('#example').DataTable( {
  // initialization options here
  initComplete: function(settings, json) {
    //use theTable var to create the dropdown here
  }
});

rhino

On the other hand, I don't know if theTable would be accessible at that point in the code, so you may have to use the settings or json object to get the column data and build the dropdown.

robov

I understand your first reply...
But the second part ", so you may have to use the settings or json object to get the column data and build the dropdown." I do not understand

robov

btw, placing the code in the initComplete does work... but I am not sure for how long (the data can be)

rhino

Here's our example modified to use the json object

daniel_r

you can also use my yadcf for the column filtering http://yadcf-showcase.appspot.com/DOM_source_chosen.html

robov

@daniel_r.... GREAT plugin !! thank you for this tip. Does it also support date filtering ? (ie today, last 7 days, last month ) ?

robov

@rhino... SUPER... thank you sooo much !

daniel_r

@robov, yadcf got 8 different types of filter types and lots of lots of different customization's/properties you can take a look at the filter_type: "range_date", in the showcase: http://yadcf-showcase.appspot.com/DOM_source.html

robov

Excellent, thank you daniel_r. Looks like an amazing plugin. Can I suggest to include an extra filter based on dates (show only from today, show only this week, show only this month, show only last 3 months, show only this year

daniel_r

I can enhance the range_date, you will have to provide array of objects "[{vale: 1, label: Today}, {vale: 2, label: Last week}, ... etc] and custom function that will accept two parameters (type, date_val) where the type will be one of the values from the array of obj and the date_val will be one of the date in the relevant column - this "custom function" will be executed for each row in table and the date_val will be tested against that function which in turn will return true / falsem so instead of tow date inputs you will have a select menu with values from that array of objects you provide yourself and each time you select a value from the select your "custom function" will be executed for each row (for relevant column), if you want this feature open a new issue on yadcf project page (will take some time) https://github.com/vedmack/yadcf/issues?milestone=1&state=open

---

Actually it wont be an enhancement of range_date , instead it will be a new filter type that will allow the use of custom filtering function (will be good for date and any other type of inputs too)

robov

Thanks... another option would be to have hidden fields that are dynamically filled with the start and end date. So I select a external dropdown, this fills the hidden date_Start and date finish fields and virtually presses filter.
That might be even easier... but I do not know how yet

daniel_r

the other option will be harder to maintain (for you) because you will have to create new dates for your hidden fields each time, because the last month dates as they are today will be different tomorrow and the day after tomorrow. IMO the "custom filtering function" is more powerful and useful :)

robov

The hidden fields option would ofcourse be some js to calculate the dates based on today(). hahah... Not intending to maintain that everyday

IMO the "custom filtering function" is more powerful ==> Agree