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

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

NoePMNoePM Posts: 5Questions: 1Answers: 0
edited July 2021 in DataTables 1.10

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.

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • NoePMNoePM Posts: 5Questions: 1Answers: 0

    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!

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • NoePMNoePM Posts: 5Questions: 1Answers: 0

    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!

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • NoePMNoePM Posts: 5Questions: 1Answers: 0

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

    Thanks again

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited July 2021

    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

  • NoePMNoePM Posts: 5Questions: 1Answers: 0

    You`re awesome Kevin
    Now works!

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

Sign In or Register to comment.