Example of Nested DataTable with Row Re-order of Outer Table Row?

gh2m

I have seen nested tables and row reorder function separately. Can you point me an example of two combined? The inner table has to be a different table, not just td.details-control.

kthorngren

Here is one with the inner table being a Datatable.
http://live.datatables.net/gohefoki/317/edit

Is this what you are looking for?

Kevin

gh2m

I think this will work. The only thing is I changed the data source to an array object like following:
var dataSet = [
[1, null, "John Doe", "Web Developer", "Dallas", "$100,000"],
[2, null, "Jane Doe", "Tester", "Richardson", "$50,000"]
];
......
and initiate the table with following:
var table = $('#example').DataTable({
data: dataSet,
pageLength: 5,
......

But I am getting following error:
DataTables warning: table id=example - Requested unknown parameter 'index' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

Is my array object not correct?

kthorngren

Did you look at the troubleshooting steps in the link ( http://datatables.net/tn/4 ) ?

Is my array object not correct?

You have an array of arrays there is no object. I'm guessing you didn't change the column.data. My example has this for object based data:

    columns: [
      { data: 'index', visible: false},
      {
         className: 'details-control',
         orderable: false,
         data: null,
         defaultContent: ''
      },
      { data: "name", className: 'row-reorder' },
      { data: "position" },
      { data: "office" },
      { data: "salary" }
    ],

Try changing to this:

    columns: [
      { visible: false},
      {
         className: 'details-control',
         orderable: false,
         data: null,
         defaultContent: ''
      },
      { className: 'row-reorder' },
      { null },
      { null },
      { null }
    ],

or

    columnDefs: [
      { targets: 0, visible: false},
      {
         targets: 1,
         className: 'details-control',
         orderable: false,
         data: null,
         defaultContent: ''
      },
      { targets: 2, className: 'row-reorder' },
    ],

Kevin