ColReorder, 2 columns with different data type

alex.michaud

I have a table with a few columns.
Column A at position 3 is of type "string".
Column B at position 4 is of type "datetime".

If I reorder those 2 columns, the columns header and data seem to be ok but there is a problem with the display.

The column B is now at position 3, but instead of seeing the properly formated date and time, I have an unformatted value that look like this : "2014-08-18T16:36:00+08:00"

The column A is now at position 4, but instead of seeing the string I have the error message : "Invalid date".

Reordering the columns isn't supposed to automatically move the data type?

I haven't found a workaround yet. Any suggestion?

(It's an intranet app, no link. I could try to recreate the problem on a publicly accessible website)

allan

This invalidate call should cause DataTables to re-detect the types for the columns.

Indeed this example shows that it should work when changing a date column with a string column.

I'd need a test case showing the issue I'm afraid.

Allan

jr42.gordon

Some tips when using ColReorder, be sure to

1. Give each <th> a unique classname
2. Use columnDefs.targets and provide that <th> unique classname. DO NOT assign column #.
3. if you are dealing with dynamic data, best to use objects and not arrays.

If you do the above, yes you will need to declare a columnDefs.target for each column. Trust me, this minor annoyance will save you plenty of headaches.

alex.michaud

Ok, I found the problem.
First, in our app we use Javascript to build the tables, no html.
We have dozens of tables and all the data come from an API. The data is dynamic so we have build a software layer to handle all the different possibilities.

The problem was inside the render function. I was using meta.col to figure out which column I was dealing with. That is ok until the columns move.
The correct way to do it is
var api = meta.settings.oInstance.api(true);
var newPositionAfterOrdering = api.colReorder.order()[meta.col];

This way I get the column index after the reordering.

allan

Ah! Yes - that would do it. Good to hear you tracked it down - thanks for posting back.

Allan

jr42.gordon

@alex.michaud Why not try the following and see if that works better for ya. This method works best when dealing with array of objects.

Assign unique class to thead <th>
<th class="date-col">Date</th>

DT columnDef config with declared type

{
   "targets"   : 'date-col' ,  
   "type"      :"datetime",
   "data"      : 'DATE'
}

You shouldn't need to do anything special with a render function, unless you require HTML.