Pesky "column count mismatch" issue

chbocca

Hi again.

In my production program, I keep getting this pesky error message: "DataTables warning: table id=mfoptable - ColReorder - column count mismatch"

It happens whenever I update the table headers and then re-initialize.

I've tried recreating the error in a demo program using same html and dt version, but unfortunately, unless I force a "th and td" mismatch, I cannot get the error to repeat.

In the demo, you can hit the botton: "Change column headers." Success each time, no errors! It simply updates the html and ColumnsDefs options with each toggle, then re-initializes.

But the "same code" in the production program results in the error each time.

I've been suppressing it with: DataTable.ext.errMode = 'none';

So, my question: Is the any way to see more of what is triggering the message?

I've already performed every suggestion in your note: https://datatables.net/manual/tech-notes/18

Thanks, as always, in advance.

allan

Possibly it could happen if the number of columns in a saved state is different from those in the loaded table. Could that be the case?

This is where the error is being flagged in the code. Putting a breakpoint on it and seeing what the two arrays are, and comparing to what you would expect them to be, would be what I would do to debug this.

Allan

chbocca

Yes, so, another way I suppress the error is with: table.state.clear();

Before re-initializing the table.

chbocca

But I would have thought that new DataTable() initialization would take care of that?

chbocca

Thanks Allan. I will follow your suggestions. I do believe after each run, I save the table state in the production version, something I am not doing in the demo. Will review! Will post my finding. Thank you again!

kthorngren

If you change the number of columns then you will want to use destroy() and probably empty the table, like the example in the docs, before recreating the HTML table on line 313. Use DataTable.isDataTable() to check if the table is a Datatable before using destroy().

Kevin

chbocca

Thank you, Kevin.

I did see your previous posts and tried these suggestions previously.

But, notice that in the demo, I'm re-initializing after I update the columns. So, I don't think I need to destroy. Agree?

I think it has something to do with state, as Allan hinted, which even for "new" DataTable() I finally realize that column order is part of the state.

I will keep at this until I can demo the error and then demo the correction.

Always appreciate your insight!

allan

I suspect I know what is happening. In 2.2.0 I made a change to the state loading to allow it to attempt to load state, even if the number of columns has changed. From the release notes:

State restore will still attempt to restore the state for paging, page length and search, even if the number of columns has changed.

I've just committed a change to ColReorder to account for that. Now ColReorder will check for the different column count and throw it away if it doesn't match.

Could you try the nightly build with the fix (it should rebuild in 5 minutes or so) and see if that addresses the issue for you?

Allan

chbocca

Thank you, Allan. Have been at this all day. Still get error on my production site with nightly build. If I clear the state before re-initializing, it works. But I do not need to do that in my demo. Funny, I did start noticing the error with 2.3. Still, if I can't replicate in demo, I'm just wasting your time. I will keep at it.

allan

The nightly can be cached, it might be worth trying it with a query parameter to bust the cache e.g. like this.

Allan

chbocca

Progress!

Here is link to demo using dt2.1: demo_dt21.

Here is link to demo using dt2.3: demo_dt23.

Here is link to demo using dt nightly build: demo_nightly.

Just click on Change Columns button in each.

Both demos using dt23 and nightly build throw error ... the dreaded "DataTables warning: table id=example - ColReorder - column count mismatch"!

Demo using dt21 does not. (That was why I could not replicate the error from my production site ... it uses dt23, but my original demo was using dt21 ... a blind man should have seen it!)

All three demos use exactly the same code except for dt version.

You tell me which one handles the col changes the way you want, and I will adjust accordingly.

It seems to me that if col order is a state property, adding or removing columns with a new dt initialization should not require you to clear state. But, you're like the most precise yet efficient person I've ever worked with, so you decide.

Can't thank you enough Allan.

c

kthorngren

Out of interest I copied the nightly example code into this test case:
https://live.datatables.net/wolexefo/1/edit

I loaded https://nightly.datatables.net/colreorder/js/dataTables.colReorder.js?2025-05-29 to place a breakpoint here:

if (state.colReorder && dt.columns().count() === state.colReorder.length) {

I don't know enough about the code to understand what is happening when this if statement fails but it still causes the error being seen. Maybe this test case will save some time for @allan to debug.

Kevin

allan

Thank you gentlemen - that was indeed extremely useful! Fix committed and the updated test case works nicely now.

Allan

chbocca

Yes, it does: demo_nightly.

Love you guys.

Thank you.

c

allan

That's ColReorder 2.1.1 released with this change

Allan