ColReorder Bug: Data Arrays and Orthogonal Data
ColReorder Bug: Data Arrays and Orthogonal Data
Hello all.
I'm working on an application that requires
- Data loaded via ajax
- Data defined using arrays (not objects)
- Column reordering
- Orthogonal data
Sounds easy enough, right?
Unfortunately, defining data as arrays does not work when the ColReorder extension and orthogonal data are used at the same time. Defining data using objects works as expected, but doing so dramatically increases the ajax payload (which is why arrays are preferred).
I may be passing the wrong configuration options to datatables, but the error behavior leads me to believe this may be due to a bug in the ColReorder extension.
Here is a quick example of a configuration that works as expected:
colReorder
set to totrue
data
defined as objectscolumns.data
set to a string (object key)
// Works, but ajax payload is large due to use of objects instead of arrays
{
columns: [
{ data: "id", title: "ID" },
{ data: "name", title: "Name" },
{ data: { _: "date_raw", display: "date" }, title: "Date" }
],
colReorder: true,
data: [
{
id: "1",
name: "Item 1",
date: "May 18th 2010, 7:10:25 pm",
date_raw: "2010-05-19T02:10:25.808Z"
}
]
}
Here is a the same configuration with data defined as arrays that does not work as expected:
colReorder
set to totrue
data
defined as arrayscolumns.data
set to an object with_
anddisplay
properties set to column indices
// Does not work (throws JavaScript error)
{
columns: [
{ data: 0, title: "ID" },
{ data: 1, title: "Name" },
{ data: { _: 3, display: 2 }, title: "Date" }
],
colReorder: true,
data: [
[
"1",
"Item 1",
"May 18th 2010, 7:10:25 pm",
"2010-05-19T02:10:25.808Z"
]
]
}
When I attempt to reorder a column with the above configuration I receive the following error in JavaScript console:
datatables.js:27822 Uncaught TypeError: obj[prop].split is not a function
This error occurs just a few lines into the $.fn.dataTableExt.oApi.fnColReorder
function. I've tried a number of other configuration options including setting data
to null
and specifying column indices with columns.render
but have not had any success.
I've created a test page with a example tables and configurations here: http://codepen.io/anon/pen/gwRwzV
Thanks in advance for any help. It is very much appreciated.