Creating a Nested Table with Show/Hide Functionality

Creating a Nested Table with Show/Hide Functionality

GregJGregJ Posts: 1Questions: 0Answers: 0
edited November 2010 in General
I am new to jquery and the DataTables plug-in. Is it possible to nest a data table inside a data table and add the show/hide functionality to it? For example, is it possible to combine the inner table example (http://datatables.net/dev/inner_table.html) with the row details example (http://datatables.net/examples/api/row_details.html)?

I need my nested table to be defined in html like the inner table example. If you could provide me any example code on how to do this that would be awesome.

Thanks!

Greg

Replies

  • allanallan Posts: 63,522Questions: 1Answers: 10,473 Site admin
    I'd forgotten about that inner table example :-). Yes it is possible - simply use the row_details example to construct a table inside the "opened" row, and then run DataTables over it. fnOpen ( http://datatables.net/api#fnOpen ) returns the opened TR node, so you could do $('table', nTr).dataTable() (where nTr is the row from fnOpen).

    Allan
  • secondaccsecondacc Posts: 5Questions: 0Answers: 0
    edited May 2011
    I want to manage nested comments with Datatables.
    Background:
    I store visitor comments together with their parent ids in a database.

    As GregJ said, it would be nice to expand additional data for an entry.
    I would need to either hide the replies to a comment and just show them or query them on the click of a button.
    I have it all running with un-nested comments. I see that fnOpen would work well indeed.

    I realiyed that I could just add the additional rows to the server response.
    So instead of adding the data to $output['aaData'], I add it to extra rows like this
    [code]$output['additional_data'][$id_of_parent_row] = $content;[/code] (and then json_encode the whole server response).
    The question now is how I can access the extra data on the client side?

    The solution must be in the fnCallback function used in fnServerData. I don't know how to use it, though.
    [code]
    "fnServerData": function ( sSource, aoData, fnCallback ) {
    $.ajax({
    "dataType": 'json',
    "type": "POST",
    "url": sSource,
    "data": aoData,
    "success": fnCallback
    });
    }

    function fnCallback( oObj, oSettings, oData ) {

    //???

    return oObj;
    }
    [/code]
  • secondaccsecondacc Posts: 5Questions: 0Answers: 0
    I was able to solve this problem in the fnServerData() function by working with the json response. :-)
This discussion has been closed.