ColReorder Bug: Data Arrays and Orthogonal Data

ColReorder Bug: Data Arrays and Orthogonal Data

PajamaJamPajamaJam Posts: 8Questions: 1Answers: 0
edited September 2016 in Free community support

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:

// 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 to true
  • data defined as arrays
  • columns.data set to an object with _ and display 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.

This discussion has been closed.