suddenly added colspan when adjusting to mobile screen

kimsojung

Link to test case
Please understand that we cannot make a test case because the project with the problem is Spring and we use internal DB. Attach the html and js code of the problem jsp file below.
(Tell me if you need more code!)

[HTML]

[JS]

Debugger code (debug.datatables.net)
Debug result came out as below.

15 tests complete. No failures or warnings found!
If you are having problems with your DataTables, please upload a data profile using the Upload option below, and post a support request in DataTables forums, with a link to a page showing the issue so we can help to debug and investigate the issue.

Error messages shown
No error messages were found in the Chrome developer environment.

Description of problem
Because it is a reactive table, I reduced the size to mobile screen size. However, the first <td> automatically generated colspan="2".

colin

I appreciate you can't create an exact test case, but we need to see the a working example to be able to understand the problem and to be able to debug. This can be more simple than your project, with the minimum code to reproduce the issue. 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.

Cheers,

Colin

kimsojung

@colin
Thank you for your reply! We will try to make a test case without asynchronous connection as much as possible within this week! We will make comments again when we create a test case!

kimsojung

@colin
Hello, I was code-analyzing with my team members about the phenomenon and found that there was a problem with "Controller.java". (".jsp" had no problem!) Thank you for your continued kindness!

Busteren

I am using serverside processing and responsive, and have the exact same issue described here. It's the responsive extension that adds the colspan on resizing.
Responsive 2.2.7
Line: 793
$('td', dt.table().body()).eq(0).attr('colspan', visible);

if (dt.page.info().recordsDisplay === 0) {
        $('td', dt.table().body()).eq(0).attr('colspan', visible);
 }

Also using custom breakpoints in this case. When I set the class names to "all" then there is no issue with the colspan.

DataTables DataTables 1.10.23

There are records in the table, however datatables doesn't seem to be picking up that.

allan

@Busteren - Can you link to a test case showing the issue please? The line you indicate is used to set the "No data in table" message to be the correct width (in terms of column spans) when Responsive is active.

That appears to be working correctly for me in this example - search for "notinhere" and then resize the browser window to trigger that line.

Thanks,
Allan

Busteren

@allan here you go: live.datatables.net/xipumeba/2/

If you resize you should see colspan="5" added to the first row

Thought I needed server-side data, but works with just the data in <table> from initialisation

colin

Thanks for the test case, but it's not running. serverSide is set but there's no Ajax configuration to get that data. Could you take a look, please.

Colin

Itrac

Hi everybody,

I stumbled upon the same issue.
The issue only appears when

table.on('column-visibility.dt page.dt search.dt', function () {
    table.columns.adjust().responsive.recalc();
});

is used to prevent another reponsive issue: when you remove the event listener and search for 'Jena Gaines' while the output window has a width of about 600px, responsive is calculating the columns incorrectly. The 'position' field for Jena Gaines has a much longer text than the others. The responsive extension seems to handle such long strings only correctly when it is visible on the first page.

The eventlistener prevents this issue but if you search now for 'Jena Gaines0' and hit backspace to delete the '0', the now only visible row has a colspan applied.

A working testcase demonstrating the two issues can be found here:
live.datatables.net/fujurewa/16/edit

MRSAI

$('#table tbody').remove();
$('#table ').dataTable().api().destroy();

For me i try to remove tbody before re-initialize datatable. So it will not effect UI issue