Child row example without AJAX

Child row example without AJAX

twicebsihoptwicebsihop Posts: 3Questions: 1Answers: 0

I'm attempting the Child Rows example (http://datatables.net/examples/api/row_details.html) without AJAX and running into some problems. I'm definitely doing something wrong here since DataTables doesn't even appear to initialize.
The JS Fiddle link: http://jsfiddle.net/wq8b6o4c/2/

Without the "columns" attribute, DataTables initializes but I get errors from colspan.

Any help would be greatly appreciated.

Answers

  • twicebsihoptwicebsihop Posts: 3Questions: 1Answers: 0

    Figured it out via stack overflow search....

    Just need to pass the hidden value through a data attribute and draw the detailed row on the click event.
    No special datatable initialization parameters needed.

    http://jsfiddle.net/twicebishop/h94m5xsw/2/

  • asleasle Posts: 96Questions: 28Answers: 0

    Hi, I don't get this. Where is your hidden data? I don't see the <tr>and value for the hidden data. I also tried like your first jsfiddle example but where did you get the data from in the second example that works?

  • twicebsihoptwicebsihop Posts: 3Questions: 1Answers: 0
    edited March 2015

    Look at the second jsfiddle example. The hidden row data is an HTML 5 data attribute:

    <tr data-child-value="hidden 1">

    The value is then read after the click event and formatted for display.

  • asleasle Posts: 96Questions: 28Answers: 0

    I solved part of this. I didn't read your post good enough. So I now have the child data in the <tr data-child-name="row0" data-child-value=' data here ....

    The problem is now that I want to open the child row which contains form fields that are to be filled out. DataTables strips all HTML from my code. Also why does the child row include the 3 last <td>s from the parent row??

    http://jsfiddle.net/asle/a2p4kmh9/8/

This discussion has been closed.