Multiple tables with show more info (row) and editable content (td)

NoePM

I am very "Newbie" in this stuff
I need to run multiple dataTables at the same time, all of them must to have this features...
1.- Show more info in a child or closest ('td.details-control')
2.- Edit inline content (editable TD)

This is my code so far, its have working because I can´t make it work with multiple tables, I noticed there are some version issues (DataTables and/or dataTables)

/* Init DataTables */
$(document).ready(function () {
    $('table.display').DataTable({
        "dom": '<f<t>ip>'
    });
});

/* Data Table inline TD editor */
var table = $('#simulationTable').dataTable(); // NEED FOR ALL DATATABLES
$('td.editableTd', table.fnGetNodes()).editable( '', {
    "callback": function( sValue, y ) {
        var aPos = table.fnGetPosition( this );
        table.fnUpdate( sValue, aPos[0], aPos[1] );
    },
    "submitdata": function ( value, settings ) {
        return {
            "row_id": this.parentNode.getAttribute('id'),
            "column": table.fnGetPosition( this )[2]
        };
    },
    "height": "14px"
});

/* Data Table Show Child Row Content */
var table = $('#simulationTable').DataTable();  // NEED FOR ALL DATATABLES
$('table.display').on('click', 'td.details-control', function () {
      var tr = $(this).closest('tr');
      var row = table.row(tr);
      if (row.child.isShown()) {
          row.child.hide();
          tr.removeClass('shown');
      } else {
          row.child(format($('table.display td.details-control').index($(this)))).show();
          tr.addClass('shown');
      }
});

This is the prompt error message I got...
DataTables warning: table id=simulationTable - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

Note: I am using dataTables v 1.10.11 in a local environment and I need to keep using this version
Hope you can help me, thanks in advance!

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Everything looks ok at a glance. Have you followed the steps in the technical notes linked to in the error? That'll be the place to start,

Colin

NoePM

Thanks for your reply Colin.
Unfortunately I can´t make it work with multiple tables...
Adding " destroy: true, " only helps me to disappear the warning prompt

CODE:
/* Init DataTables */
$(document).ready(function () {
$('table.display').DataTable({
destroy: true,
"dom": '<f<t>ip>'
});
});

/* Data Table Show Child Row Content */
**var table = $('#simulationTable').DataTable(); **
$('table.display').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
row.child.hide();
tr.removeClass('shown');
} else {
row.child(format($('table.display td.details-control').index($(this)))).show();
tr.addClass('shown');
}
});

... In the "var table" line, only can declare one table ID in my case "#simulationTable"; I tried with "table.display" but it doesn´t work

Any idea!

kthorngren

I tried with "table.display" but it doesn´t work

Do your table elements have the class display? If you want to initialize both tables with one set of code then you need to use a jQuery selector that finds both tables.

Are you trying to initialize more than one table with the id of simulationTable? If so that is not allowed in HTML

Here is an example with two tables on one page with child detail rows:
http://live.datatables.net/lodeneni/1/edit

In order to help we will need some idea of what you have. Please prove a link to your page or a test case showing the issues. Or update the example I provided.

Not sure what editable() is. AFAIK its not a Datatables product. You might need to get support from the author of that library. This example shows Datatables inline editing.

Kevin

NoePM

Thanks kthorngren!
Sorry for that editable(); just testing other feature...
Your example works very well, but `m still having the problem...

I`m afraid its a jquery and/or dataTables versions issue (i think)
My used versions:
- jquery.min.2.1.1
- jquery.dataTables.min.1.10.11
- bootstrap 3.3.6 as well

Yeah! I am using "display" className in the table tag and for all tables.
Using this way - var table = $('table.display').DataTable(); child row doesn´t appear
Using a table id var table = $('#simulationTable').DataTable(); works ok, but only for that single table.

/* Init DataTables */
$(document).ready(function () {
$('table.display').DataTable({
destroy: true,
"dom": '<f<t>ip>'
});
});

/* Data Table Show Child Row Content */
var table = $('#simulationTable').DataTable(); //works for that single table
var table = $('table.display').DataTable(); //nothing happends, just toggle the control class
$('table.display').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
row.child.hide();
tr.removeClass('shown');
} else {
row.child(format($('table.display td.details-control').index($(this)))).show();
tr.addClass('shown');
}
});

Thanks again!

kthorngren

Its hard to say where the problem might be just by looking at code snippets. Please provide a link to your page or a test case replicating the issue so we can help debug. Feel free to update my example.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

NoePM

Hi Kevin
Here is the code (test case)
http://live.datatables.net/pokojomo/1/edit

Thanks again

kthorngren

You have this code:

$(document).ready(function () {
    $('table.display').DataTable({
       // destroy: true,
        "dom": '<f<t>>'
    });
});

var table = $('table.display').DataTable();

You are wanting to initialize datatables in the document()ready() function but the var table = $('table.display').DataTable(); statement is executed first since its outside of document()ready(). Then everything in document()ready() is executed. Since you datatables has already been initialized with default settings you get the reinitialize error. Remove var table = $('table.display').DataTable();.

Its probably better to get the table's Datatable API from within the click event. I added this statement: var table = $(this).closest('table').DataTable();. See this updated example:
http://live.datatables.net/pokojomo/2/edit

Kevin

NoePM

You`re awesome Kevin
Now works!

Thanks for all your support, I learned a lot!
You rocks!