State Save Filter for Select and Text-Input in Header

majamuel

Hi,

i wanted to make a filter in a header row of a Datatable that is statesave.
I found a lot of hitns where i always took some parts and builded it together

As you see in

live.datatables.net/foxitiko/5/edit

The Filters work...
The only thing i don´t get worked is the preselection of the select field with the searched value on reload...
If you reload the page.... Search filters in Text Inputs are set and searched... but with select i can´t do it... I tried several ways...
Do you have a hint for me...

I´m not really familar with Javascript... So if there is a possibility to make things shorter / faster, i would be very thankfull ;-)

Greetings
Marc

colin

This thread should help, it's asking the same thing.

Cheers,

Colin

majamuel

Hi Colin,

thanks for your fast answer... I´ve seen the threads... but unfortunately i can´t addapt them in my testcase... I can´t set the select field on the selected value.... I think it is more a Javascript-Understanding Problem on my side...
Perhaps can anyone help in my example... ;-)

Thanks a lot...

majamuel

Finally i´ve done it.... (don´t exactly understand everything... but who cares)

Here is an Example for an Statesave Filtering with text Inputs and select fields in headerrow...

live.datatables.net/foxitiko/6/edit

The filters are activated by an data-attribute in thead...

Can a Javascript-Expert have a look at the source... Perhaps there is a possibility to optimize the code

majamuel

Hmm... there is one mistake in my example...
If i have more than one select field.... all Options are taken from last select field...

live.datatables.net/foxitiko/8/edit

I know it´s here....
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>')

How can i say, that options only append to matched select?

colin

I'm not quite following, but if you mean cascading options, then this example should help,

Colin

majamuel

Hi Colin,
many thanks for your tries to help me... ;-)
Your example is quite awesome... an Idea i haven't thougt about... thanks for that...

But i want to make it easier to add an select filter to an column... so i added a data attribute to a head column and only create select filter if data-attribute is like "select"..
This all works...
But if i have more than one select field in header... all Select Options are taken from the last column... I somewhere overwrite the formerly collected options... and i don´t know where....

Here you can see the problem...
live.datatables.net/foxitiko/8/edit
2 select Fields in ID and ROLE... but only options from role in booth selects...

majamuel

I´ve found it... It was an error in setting the selects in loop...
i´ve always selected all selects and inserted the options... So... the options of last select won...
Here you now have an example with statesave text and select filters in header-row.
No customizing for filters in javascript... Just add "text" or "select" to data-filter-attribute in Table header...

live.datatables.net/foxitiko/10/edit

Thanks for your help...

colin

Excellent, glad all sorted,

Colin