datatables.responsive header cells issue

jna

Hi
I have now implemented datatables responsive. It works but the th-cells (header cells) are not removed (no style="display:none;") and the values are not appended into the <span class="dtr-title"></span>

The ordinary cells are working fine.

I have the "responsive" and "nowrap" class added to my datatable. How can that be?

kthorngren

Sounds like a styling issue. Are you using a styling Framework? If so did you install the proper Responsive styling integration files?

Maybe you can post a link to your page or a test case replicating the issue. This will allow us to help you debug the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

jna

It's definately not a styling issue since it is dynamic values not being inserted style="display:none;" or appended <span class="dtr-title"></span>. Styling cannot append values on resize. I only use the basic datatables styling along with the responsive styling

kthorngren

This example seems to work:
https://datatables.net/extensions/responsive/examples/initialisation/className.html

I may be missing something but it seems like the problem is something specific to your environment.

Kevin

kthorngren

Have you tried using the init option instead of the class?
https://datatables.net/extensions/responsive/examples/initialisation/option.html

Kevin

jna

I found the bug. If the "columns" options is present in the datatable the header cells are not being handled responsive.

kthorngren

Like this example?
https://datatables.net/extensions/responsive/examples/initialisation/ajax.html

It seems to work.

Kevin

jna

Yes like that example. But in my case i do some HTML manipulation like: "columns":[{targets: 0, data: function ( row ) { return '<span>'+ row[0] +'</span>' }}]
(This is a simplified example but still breaks the responsive function)

kthorngren

Maybe you can put an example together for us to take a look at and help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

jna

I made an example here: http://live.datatables.net/jiwiyihu/2/

It does not behave excactly the same way. But when i add the columns option with HTML manipulation responsive stops working.

Note: The HTML in the columns option is not added, don't know why and that is not the problem here.

kthorngren

Your example is getting this error which not only affects responsive but other Datatables features.:

jquery.dataTables.js:1171 Uncaught TypeError: Cannot read property 'mData' of undefined

When using columns it is expected that you provide config for all the columns. Thus the above error. It looks like you meant to use columnDefs along with columnDefs.targets.

However it doesn't seem that return '<span>'+ row[0] +'</span>' will work, when using targets: 0, in the case of a DOM sourced table. return '<span>'+ row[1] +'</span>' does work. Instead of using columns.data as a function you probably will want to use columns.render.

Here is the updated working example:
http://live.datatables.net/xiviqebi/1/edit

Kevin

jna

Yes, that's a nice working example. somehow my solution keeps ignoring the responsive extension if I have any kind of columns defined. I leave it for now and do my own responsive handling with css-only.
Thank you so much for your time

kthorngren

keeps ignoring the responsive extension if I have any kind of columns defined.

Did you check for errors in your browser's console?

Did you make the changes I recommended?

Kevin

rsnelders

Hey, got a fix for this yet?

I'm getting display:none added to all the columns aswell as soon as the width (or height) changes of the page..

allan

@rsnelders - Can you link to your page showing the issue please?

I'm getting display:none added to all the columns aswell as soon as the width (or height) changes of the page..

I'm not sure that is the same issue as was originally reported in this thread. Also Kevin's example resolved the issue discussed here. it might be worth opening a new thread with a link to a test case showing the issue you are seeing please.

Thanks,
Allan

rsnelders

@allan

https://recordit.co/k7JNSBmWLT

I got a few hardcoded columns and some are dynamic.
Not all columns use a render function.

kthorngren

Please don't ask duplicate questions. Please see my response to this same question in your thread:
https://datatables.net/forums/discussion/61999/when-exporting-to-csv-table-headers-are-set-to-display-none#latest

Kevin