stateLoadParams event issues

acctsw11

Hi,

I am having issues with my search fields and the savestate option.

The following is not producing the intended results:
stateLoadParams: function (settings, data) {
data.search.search = '';
}
Is not clearing my search results, so it loads with select options loaded (unselected).

stateLoadParams: function(settings, data) {
for (i = 0; i < data.columns["length"]; i++) {
var col_search_val = data.columns[i].search.search;
if (col_search_val != "") {
$("select", $("#example foot th")[i]).val(col_search_val);
}
}
}

Is not setting the selecting the select options.

Test case: https://live.datatables.net/fekehoxi/1/edit

Any help would be appreciated.

Thanks and regards, Stuart

acctsw11

Try https://live.datatables.net/fekehoxi/3/edit?html,js,output, added missing semicolon

kthorngren

The following is not producing the intended results:

The data.search.search = ''; applies only to the default global search which your test case isn't displaying. So it wouldn't affect the column searches if that is what you are expecting.

Is not setting the selecting the select options.

Take a look at the search values. If one option is selected the value looks like this:

^(Accountant)$

If multiple are selected the value looks like this:

^(Accountant|Chief Executive Officer \(CEO\)|Chief Financial Officer \(CFO\))$

Updated the test case to show the values:
https://live.datatables.net/potujuda/1/edit

You will need to parse the search value to reverse what is used in the column().search() call, for example:

1. Remove the leading ^( and trailing )$.
2. Reverse the escaped characters applied by $.fn.dataTable.util.escapeRegex().
3. Split the string at the |.

Then use something like the suggestions in this SO thread to set the multiple selection values.

Kevin

acctsw11

Hi, thank you for your reply. However, I am still not able to get the selection working.

I tried hard coding the values to eliminate the parsing. For example, creating the select controls as:
<select id="x1" multiple="multiple"><option value=""></option></select>

When selecting:
$("#x1 option[value='" + "Airi Satou" + "']").prop("selected", true);

This working in the $(document).ready() function, but not in stateLoadParams event.

Please see: https://live.datatables.net/potujuda/2/

Thanks and regards, Stuart

kthorngren

Right. Its due to initComplete executing after stateLoadParams and building the select inputs after stateLoadParams. Instead of using stateLoadParams use state.loaded() in initComplete to set the selected options after the inputs are created.

Also note that the same id is assigned to each of the inputs. Each id must be unique on the page. Maybe incorporate the use of the column index in the id.

Kevin

acctsw11

Thank you!!!

Added to the end of init complete:
var state = this.state.loaded();
var cols = state.columns;
for (i = 0; i < cols.length; i++) {
var col_search_val = state.columns[i].search.search;
if (col_search_val != "") {
//set controls
}
}