"Incorrect column count." when trying to add a new pair.(3 works perfect. I can't add 4th)

wad11656

Link to test case:
I do not have a ready way to share (requires a login). If you need a login to the site let me know if I can somehow give you the credentials.
But I have a YouTube video demonstrating the problem:
https://www.youtube.com/watch?v=LfEpiSUnm8E
(Filtering works with 3 columns, but breaks with 4 columns...Along with showing the error.)

Debugger code (debug.datatables.net):
"undefined" (The table is weirdly embedded...so maybe that's why the debugger code doesn't see it.)
"Your debug code is: emekaq"

Error messages shown:
DataTables warning: table id=restock_trigger_table - Incorrect column count. For more information about this error, please see https://datatables.net/tn/18

Description of problem:
When I add a new column to the table (a new <th> and a new accompanying <td>), I get the above "Incorrect column count" error. I also can no longer filter the columns.

What adjustments do I need to make?

I'm already specifying the same number of headers (<th>) and columns (<td>) in my code...

I'm also changing the "columns" table parameter in the initialize_datatables:

table = $('#restock_trigger_table').DataTable({
    ...
    columns: Array(3).fill({ orderable: true }),
    ...

From that to this:

table = $('#restock_trigger_table').DataTable({
    ...
    columns: Array(4).fill({ orderable: true }),
    ...

Is there any other change I need to make?

kthorngren

It's difficult to understand your code flow in the video. Based on the video it looks like the Datatable is initialized before adding the second thead for the search inputs:

After clicking ok the search inputs are added:

Based on the video I'm not sure why that flow would happen. It looks like the Datatable is initialized after adding the 2nd thead in line 93. Possibly there is another Datatable initialization that is happening with an incorrect column count?

Otherwise the HTML generated looks correct. You can validate the table is correct with W3c HTML Validator.

To help further debug we will need to see a test case replicating the issue to follow the code flow. You can send @allan a PM with the login info.

Kevin

wad11656

Thank you for the thoughtful reply! I tried to replying to my post minutes after I made it to indicate this ""solved"", but it wouldn't let me.

It was some weird situation with Chrome, the iFrame the table is in (aka the platform I'm using), and potential Datatables caching. This was like the 5th time I had to wait around 10 minutes for Datatables to decide my code is OK, actually. And everything works great. Edge+Datatables seems to be happier with more quickly applying my changes in the odd iFrame environment I'm using

Replacing this:

columns: Array(4).fill({ orderable: true }),

...with this:

columnDefs: [
    { targets: '_all', orderable: true }
],

also seemed to help.

I then started getting a bunch of useless "Requested unknown parameter" warnings in my Chrome iFrame environment (not in Edge or other working environments) upon each refresh of the page that hosted my table, so I also suppressed that warning:

(function() {
    const originalWarn = console.warn;

    // Override console.warn to disable for this warning type
    console.warn = function() {
        if (arguments.length > 0 && 
            typeof arguments[0] === 'string' && 
            arguments[0].indexOf('DataTables warning: table id=restock_trigger_table - Requested unknown parameter') !== -1) {
            return;
        }

        // Pass through other warnings to the original console.warn
        return originalWarn.apply(console, arguments);
    };
})();

I don't believe browser extensions were the issue but I guess I never comprehensively tested this. It's strange that the problem randomly decides to go away after x number of minutes. The issue didn't seem as bad/present in Chrome Incognito mode (or Edge), which supports the browser extension theory, I suppose...

kthorngren

This was like the 5th time I had to wait around 10 minutes for Datatables to decide my code is OK

Are you saying the browser kept using a cached version of your page instead of refreshing changes you made? You can always force the browser to clear the cache. Databables doesn't do any caching.

suppressed that warning

Did you follow the troubleshooting steps at the link in the error?
https://datatables.net/manual/tech-notes/4

If it's random then that suggests that maybe some rows of data don't have all the cells for the row. Just a guess but I've seen this before. If this is the case then use columns.defaultContent to display an empty string or whatever you feel is appropriate when the data is missing.

Instead of suppressing it might be better to use DataTable.ext.errMode to change from using alerts for errors to providing a console message when the errors occur.

columnDefs: [
    { targets: '_all', orderable: true }
],

That is the default setting so you don't need to apply it.

Kevin