After upgrade from DT version 1.10.15 to version 2.3, Responsive extension does not work correctly
After upgrade from DT version 1.10.15 to version 2.3, Responsive extension does not work correctly
jwaynelee66
Posts: 10Questions: 1Answers: 1
in Responsive
Description of problem:
After I upgraded from DataTables version 1.10.15 to 2.3, the Responsive extension now shows "undefined" instead of the column names of the columns that cannot be shown in the row:
This question has an accepted answers - jump to answer
Answers
I forgot to mention that when I upgraded to DataTables version 2.3, I also upgraded to Responsive version 3.0.4. (I used the DataTables download builder.)
This basic example works. I noticed you have column search inputs in the header so I updated this test case with search inputs:
https://live.datatables.net/giharaka/1977/edit
It is working also. Please provide a link to your page or a test case (update mine if you want) that replicates the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Thanks. Unfortunately I cannot link to the page since it's a proprietary company system, nor easily create a test case. One difference Is that I'm using server side processing, unlike your test case that uses a static html table.
I've stepped into the Responsive code in datatables.js using the Chrome dev tools, and confirmed that the problem is that the "title" property for each column is set to undefined at the time that the table is drawn. But I've verified that the "title" properties are set correctly when the data table is created. I've been over the list of breaking changes from 1.10 to 2.3, and don't see anything that could explain this change in behavior.
Here is an example of Responsive working with server-side processing.
I'm sure, as a software dev yourself, you'll appreciate how difficult it is to debug something that you can't see not working, and does work in the examples you have.
I'm really not sure what help I can offer without being able to see the issue. I know writing a test case is a PITA, but I think it will be the only way for me to be able to help resolve the issue.
Allan
Thanks, Allan. FYI. I found that it works if I wrap my column titles in spans with a class name of "dt-column-title" when I create the table.
From looking at the DataTables source, it appears that it's supposed to do that for me, but it's not doing it. I assume there's something I'm doing wrong when I create my column headers that is breaking that DataTables logic.
It worked in version 1.10, so I must have been relying on some undocumented behavior, that now no longer works with the way I'm creating my custom column headers/filters.
Jeff
Can you update the test case I provided to show how you are creating the column headers?
https://live.datatables.net/giharaka/1977/edit
Possibly doing that will recreate the issue so we can take a look.
Are you creating the headers before Datatables is initialized?
Kevin
Yeah - it should be doing that automatically. Are you writing the HTML header using jQuery / DOM methods perhaps?
Thank you both. Yes, I'm creating the HTML header using jQuery. I tried updating the test case with my own code, but it's got enough special stuff to handle various application-specific cases that I wasn't able to easily put it in the test case.
I've had that code in place for a long time (since a very early version of DataTables), so I should probably revisit it at some point and try to simplify it.
For now, manually adding the "dt-column-title" classname in the header fixes the problem for me.
Thank you.
Are you making changes to the header after Datatables is initialized? If so this might cause the issue.
You have search inputs in the second header. Are you making use of
orderCellsTop?There have been enhancements with Datatables 2 where it keeps track of all header rows where with DT 1 it only tracked the header row that has the sorting events applied to.
Just for fun I updated the above test case to clone the header after Datatables is initialized then build the search inputs. It also shows
undefinedin the Resposive child.https://live.datatables.net/giharaka/1979/edit
The cloning should take place before initialization so Datatables can read in all header rows.
Please post code snippets or a simple test case that shows what you are doing so we might be able to provide suggestions. Possibly the test case doesn't need the special cases to replicate the issue.
Kevin