DataTables/colspan issue

Hi,

thanks for your question, and sorry for the trouble.

Unfortunately, you nailed it: Colspan and DataTables are incompatible, unfortunately. Due to that, DataTables will raise that error message when being used on tables which have connected cells.

Sorry for not having better news.

Best wishes,
Tobias

Hi Tobias, I have now progressed forward in time where we are trying to launch the site that I wanted to deploy TablePress in. However, now the client is adamant about wanting to have a result that is normally achieved by using Colspan. I realize that TablePress is not compatible with DataTables as we discussed before, but do you have any suggestions on how to mimic the effect?

This link is to the legacy site calendar page that is using a simple HTML table to display the colspan process:

https://www.process-improvement-institute.com/calendar.html

as in the line for Course 1, in the section that contains “(only offered as a private course at client site)” spanned across several cells

This link is the new site under development that has the table being generated by TablePress:

https://s90778212.onlinehome.us/pii/calendar/

Just trying to figure out how to develop an alternative so I can still deploy TablePress. Thanks!

Hi,

unfortunately, I don’t really have suggestions here, sorry ??
It’s not that TablePress is incompatible here in anyway, the problem is that the DataTables JS library simply does not support tables with combined cells via colspan. There was a recent support ticket for DataTables at https://github.com/DataTables/DataTables/issues/172 that doesn’t leave too much hope here for the future ??

So, the bottom line is: Either use the combined cells (colspan), or use the DataTables features. Both at the same time are not possible at this time, unfortunately ??

Regards,
Tobias

OK thanks Tobias, I appreciate the feedback!

Hi,

sure, no problem! You are very welcome!
Sorry that I couldn’t really help…

Best wishes,
Tobias

jmarkj, The colspan issue was brought up at my site when an administrator had a table with a header that spanned all three rows and the table broke the javascript dependent navigation.

I’ve found an example of how spanning might be used when working with DataTables which you might find helpful. https://www.datatables.net/release-datatables/examples/basic_init/complex_header.html

Yep, sorry. I should’ve looked at your table before replying; that demo does not apply to your issue.

Hi David,

thanks for sharing this information! Yes this solution could be helpful for combined cells in a table head row, but as it requires two table head rows, this won’t directly work in TablePress, as TablePress only supports one head row.
This is however helpful if one can add the head row with other ways, like custom JavaScript code.

Best wishes,
Tobias

I may have come up with a solution pending the client’s approval. the only thing I really needed DataTables for was pagination (so the head row would always be in view), so I turned off DataTables, deployed colspan on the rows where I needed it, and then just used custom CSS to mimic the header row in multiple row instances down the page (every 5 courses). We’ll see how the client feels. The current development page is at:

https://s90778212.onlinehome.us/pii/calendar/

And if the production page ends up the same way, I’ll post that URL here at that time, to benefit any others experiencing this issue. Thanks Tobias and David!

Hi,

yes, that also looks like a nice solution for your problem! ??

Best wishes,
Tobias