Select list problem... ?

tommi · May 2023

Individual column searching (select inputs):

There's a bug here : when I select an option from a select list (for a column) the all other select lists remain "intact" (they STILL have ALL options 'available'), even the table 'followed' that select option !

Any idea... ?****

Thank you.

colin · May 2023

I assume the select elements were created by your code, so you would need to update them if you want that cascading feature. This example is doing that, so you could use that as a template to get you going.

If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Colin

tommi · May 2023

11:45AM

"I assume the select elements were created by your code"

No.

It's about THIS case :

https://datatables.net/examples/api/multi_filter_select.html

(I used only the page 'title' not the link...)

kthorngren · May 2023

Did you try the example Colin linked to?
https://live.datatables.net/cusologu/7/edit

Kevin

tommi · May 2023

This time it's OK... BUT...

there's another bug : the search only works on...those colums with select list in the header (not for Name and Start date), so... not for all table dates !

[Case: https://live.datatables.net/cusologu/7/edit ]

kthorngren · May 2023

Its not a bug. The Datatables has this definition:

        columnDefs: [
            {
                searchable: false,
                targets: [0, 4]
            }
        ],

Those columns are ignored because columns.searchable has been set false. ITs using this custom API to determine if the column is searchable.

$.fn.dataTable.Api.register('column().searchable()', function() {
  var ctx = this.context[0];
  return ctx.aoColumns[this[0]].bSearchable;
});

Remove the columnDefs code and all the select filters will be applied to all columns.

Kevin

tommi · May 2023

OK ! ...true .

Thank you .

tommi · May 2023

I "tested" the table...a little .

I put a link in it (to a separate window) and after "some action" in the external page... the "table page" get a "strange" refresh : if I 'clicked' an option of at least one select list... the table "returns" to the initial state BUT the select list(s) is still "clicked" (that option(s)) !

Important ! : this happens if I simply return to the table page or if I close the external page (and return to the table page) .

How to "prevent" that "refresh" (and to keep the table at the "clicked" state) ?

[Case: https://live.datatables.net/cusologu/7/edit ]

tommi · May 2023

So... how to prevent THAT "refresh" of the table... ?

kthorngren · May 2023

if I 'clicked' an option of at least one select list... the table "returns" to the initial state BUT the select list(s) is still "clicked" (that option(s)) !

I tried recreating this in your test case but not seeing the issue. Please provide details of how to recreate the problem.

Are you looking to re-select the searched options when returning to the page? If you are using stateSave then use the solution in this thread to restore the selected options based on the save column search values.

Kevin

tommi · May 2023

I observed that strange "refresh" by testing on mobile phone... !

kthorngren · May 2023

I opened the test case on my iphone and selected a search option which filtered the table as expected. I typed new url to go to a new page and interacted with the page. I clicked the back button and the table still had the filter applied and correct item selected.

Please provide the exact steps needed to see the problem.

The problem could be caused by the browser. Try a different browser.

Kevin

tommi · May 2023

<a href="https://www.google.com" target="_blank">link</a>
put this into a td (a column without select list in the header) and...

after various ways to navigate... after a while... the table page is "refreshing" but only the content 'itself'...not the 'clicked' select list(s) : these are still on the "clicked" state while the 'rest' table 'returned' to the initial ("0") state (the new window > new 'tab') .

On PC is apparently OK .

kthorngren · May 2023

Please update the test case and provide the exact steps to recreate the problem.

Kevin

tommi · May 2023

It's about samsung internet browser .
Any (new) page will open into a new tab .

Anyway... THAT "refresh" it's happening...

The question is how to prevent any change on the table not made by me; it's like how to 'freeze' table into the state I left it before open any new tab, even the tab (table) is "refreshing" because of the browser and/or phone .

Maybe something 'related' to "iStateDuration": 7200 and/or "bStateSave": false...??

I "heard" could be something about... 'android's ram management' .

tangerine · May 2023

Please update the test case and provide the exact steps to recreate the problem.

tommi · May 2023

Sorry... I don't really know what to do...

I did my best with

<a href="https://www.google.com" target="_blank">link</a>
put this into a td (a column without select list in the header) and...

after various ways to navigate... after a while... the table page is "refreshing" but only the content 'itself'...not the 'clicked' select list(s) : these are still on the "clicked" state while the 'rest' table 'returned' to the initial ("0") state (the new window > new 'tab') .

On PC is apparently OK .

I tried it on google chrome (mobile) and... the same "behaviour" !

kthorngren · May 2023

I added the URL to one of the columns without the dropdown. I select San Francisco in the Office column then click the link and perform a google search. Close the new tab which goes back to the page with the table. The table is in the same state, the search is still applied and the San Francisco select option is still chosen.
https://live.datatables.net/comufase/1

Does this example work for you or are you able to recreate the problem. If you are able to recreate the problem please provide exact steps to take. If you are unable to recreate then update the test case to show the issue.

Maybe something 'related' to "iStateDuration": 7200 and/or "bStateSave": false...??

If you have stateSave false then stateDuration won't be in affect and Datatables won't save the table state.

Kevin

tommi · May 2023

Thank you for your effort and patience !

After a time... I think I found "what kind of" pages cause that damn "refresh"... for example... booking.com (just do a search... and see the result) and also I tried even the web google maps (almost the same...) .

As I said... I observed that "refresh" only on mobile not on PC (until now at least) .

The more tests the more reliable is... the result... I would say .

Important ! : I finally discovered "the cause" by testing on your DT...

[case : https://live.datatables.net/comufase/1 ]

kthorngren · May 2023

Sorry still not seeing the problem. I updated the link to use booking.com. I used the same steps above multiple time but the Datatables page doesn't change. I clicked on some hotels to open new tabs. After closing them and going back to the table the Datatable state is the same:
https://live.datatables.net/cehadepi/1

I tested with an iphone using Chrome.

Can you provide specific steps to recreate the problem? Maybe capture a video of the problem. Provide the mobile device platform, OS version and web browser version.

Kevin

tommi · May 2023

The same thing (the last two 'cases' !; I selected 'San Francisco' option...) .

I think... all pages that "require" an interrogation using filters and/or sorting... will do the same thing (sooner or later) : will make all other tabs to "refresh"...

In this case it's about a "fake refresh" : the "body" of the table returns to the "0 state" while the "header" (including the selected list(s)) is still 'intact' (the select list(s) is still 'clicked') .

I think it's... something "related" to the JS/JQ scripts that the table is based on .

As I said, I'm using samsung internet browser /tabs (last version of android; the same "refresh" on google chrome btw) .

Select list problem... ?

Select list problem... ?

Answers

Howdy, Stranger!

Categories

DataTables

Select list problem... ?

Select list problem... ?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables