Child rows (show extra / detailed information) question

dalps

Hello

I'm trying to implement the example (Example) for the child row additional information. I'm also using this post (Post) and the JSFiddle mentioned in the comments (JS Fiddle Example), but I'm having a problem: all the examples initialize the datatable in the document ready event, and I need to initialize mine after a button click, but it is not working, does the datatable require to be initialized on the document ready event?. See my example here (JS Fiddle). What I'm doing wrong? Thanks in advance

colin

Hi @dalps,

There were several things wrong - the best bet is to compare the code between yours and this modified, working one.

Cheers,

Colin

dalps

Thanks for your help @colin, still is not working even though I'm following your example step by step

dalps

I think the problem is in the listener to the td click event, it is not triggering when I clicked on the cell:

$('#example tbody').on('click', 'td.details-control', function () {

kthorngren

Do you have an updated example we can look at to help you? I think the biggest change colin made was to move the click events after the Datatable init code.

Kevin

dalps

This is the updated JS Bin, what I'm missing? @kthorngren @colin , thanks in advance

kthorngren

The first problem is having serverSide: true, enabled. This causes problems because you don't have an ajax config. You will see errors in the browser's console. I commented this line out.

The next is that the event handler ($('#tblReportResults tbody').on('click', 'td.details-control', function () {) should be inside the viewReport() function. Otherwise it still executes before Datatables is initialized. This is a problem because none of the rows have been built using "className": 'details-control',. This first example has these two changes:
http://live.datatables.net/gegugiro/1/edit

There are two changes I recommend. First is changing your Select extension selector to ignore the first column:

              'select': { style: 'single',
                         selector: 'td:not(:first-child)'
                        },

This way the row is not selected when you click the details button.

Second is to move the event handler inside the initComplete option. This way the event handler is not initialized until after Datatables is built. This is needed if you are using an ajax call since the ajax call is an async operation. Here is the updated example:
http://live.datatables.net/cojipavi/1/edit

Kevin

dalps

thanks @kthorngren , let me try your suggestions, I had the serverSide enabled because in the original code I'm doing an Ajax call to populate the table

dalps

Hey guys, I'm almost there, I got it to work but now something weird is happening, let me try to explain:

I'm using the datatable to display a report, I enter the report criteria (date from/to for example) and then the user has to click the viewreport button and the system displays the report results with the row details feature. Well, the first time that the system display the report the row details works perfect, I'm able to hide/show the additional info, however, if I change the report criteria or just hit the viewreport button again, the row detail doesn't work, but, if I click the viewreport a third time, then it works! And so on, What!!!??? So I debugged the application and I found what is causing this behavior: I followed your advice @kthorngren, and placed the event handler inside the the initComplete, but for some reason, when I click the viewreport button the system goes into the event handler several times, the odd thing is that the first time is an uneven number of times (show-hide-show-hide-show), the second is an even (show-hide-show-hide), then an uneven (show-hide-show-hide-show), then an even (show-hide-show-hide), and so on, I'm not sure if I'm being clear, any ideas of why this may be happening? Thanks in advance

colin

Hi @dalps ,

Glad to hear it's making progress, but as always, a picture is worth a thousand words - if you can link to your page with steps on how to reproduce the problem, that would really help.

Cheers,

Colin

kthorngren

Looks like since you are using 'destroy': true,` and reinitializing Datatables each time the "View Report" button is clicked the details event is added again resulting in multiple events. You could turn off the event handler than re-enable. Something like this:

$('#tblReportResults tbody').off().on('click', 'td.details-control', function () {
......

Or you can move it out of initComplete by changing your selector. Something like this:

$('#tblReportResults').on('click', 'tbody td.details-control', function () {

To understand why please read the jQuery Delegated Events tutorial.

Kevin

dalps

Thanks @colin, thanks @kthorngren !!!

Is working flawless now, your first suggestion did the magic @kthorngren !!!