Child rows with no tr tags.

QuesnelJ

Given:

$(document).ready(function() {
  var tableHndl = $('#allDataTableData').dataTable (  
    {
       lengthMenu  : [[10, 50, 100, 200, 300, 500], ["10", "50", "100", "200", "300", "500 (May be slow)"]],
       pageLength  : defaultPageLength, 
       processing   : true, 
       serverSide     : true,
       aaSorting    :  defaultOrderBy,    
       ajax   :    {
           error      : function()     
             {
                 $(".allDataTableData-error").html ("");
                 $("#allDataTableData").append ('<tbody class="employee-grid-error"><tr><th colspan="3">Data not found.</th></tr></tbody>');
                 $("#allDataTableData_processing").css ("display","none");
              },
           type : "post",
           url    : '/dispatch.php/' + productName + '/getData'    // Where the data is fetched.
      }
    });   
 
  $('#allDataTableData tbody').on ('click', 'span.subForm', function ()
      {
           var tr = $(this).parents ('tr');
alert (tr);   // Returns [object Object].
            var row = tableHndl.row (tr);
alert (row); // Never gets executed.
            if (row.child.isShown ())                // If this row is already open - close it.
                {
alert ('Closing');
                      row.child.hide ();
                      tr.removeClass ('shown');
                  }
            else // if (row.child.isShown ()) - Row is closed, open it.
                {
alert ('Opening');
                      row.child ( format (row.data ())).show ();
                      tr.addClass ('shown');
                 }
           });   
});        

...and some php called through ajax that returns data that looks like:

{"draw": 4,"recordsTotal": 336,"recordsFiltered": 4,
"data": [["Data11", "Data12", "Data13"], ..., ["Data21", "Data22", "Data23"]]}

The content of my first column looks like:

<span class=\"subForm\">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>

Things are chocking at: var tr = $(this).parents ('tr');

I'm guessing that this is since everything is server side proceeded, there are no <tr> or other table related HTML tags.

Is there a way to get this going?

Your support is greatly appreciated.

bindrid

 var tr = $(this).closest('tr'); might be a better choice.

bindrid

How does this line even work? 
<a href="//legacy.datatables.net/ref#aaSorting">aaSorting</a>    :  defaultOrderBy,   
  

allan

That's an error in the forum. It attempts to auto link legacy parameters, and annoyingly it attempts to do so in code blocks as well.

Since it only effects legacy parameters it isn't something I've really looked into yet, but I should get around to it sometime...

Allan

QuesnelJ

Regarding:

 var tr = $(this).closest('tr'); might be a better choice.

This is what I had initially. I have now put it back based on your recommendation.

I have also moved $('#allDataTableData tbody').on ('click', 'span.subForm', function ()
to be inside a $('#allDataTableData').on('draw.dt', function ()
listener, but neither of these changes helped.

Is this where my child row expand listener should be?

Regarding <a href="//legacy.datatables.net/ref#aaSorting">aaSorting</a> : defaultOrderBy, I'm not sure how that got in there, as my code says: aaSorting : defaultOrderBy,

Is there something better to use?

HPB

About the aaSorting, it's just that you're using a legacy name.
While you're at it, you may as well change it to order.
A list of parameters with old and new notation can be found here

As for your question. You haven't shown us your full implementation, but my guess is your child row is a tr node too. Your jquery selector will take that row instead of the parent row and datatables can't process a child row.
This selector will take the closest tr node that also has role="row":

var tr = $(this).closest('tr[role="row"]');

QuesnelJ

Here is my DataTables trace debug code: efewah.

QuesnelJ

Thanks for the aaSorting info. I've changed it to order as recommended, and all went well.

Regarding my real issue, I'm guessing that you are referring to the absence of my format () function. If so, you are correct. I had not yet bothered with it as I still can't get passed the "closest" line.

I have now changed the line to your recommendation, and added a format function. Still, things are sill not working.

I do appreciate the prompt assistance everyone is giving me.

allan

I still can't get passed the "closest" line.

Is it giving a Javascript error?

My guess is yes, and its because of this:

$('#allDataTableData').dataTable (

Have a look at the top FAQ.

Allan

QuesnelJ

Well I was not getting an error, but I did change $('#allDataTableData').dataTable (
to $('#allDataTableData').DataTable ( and now all works well.

Thanks all for your amazingly great support.

QuesnelJ

Working yes, a little too well. I am now getting my child content twice.

I have added an alert to make sure my listener is triggered only once, and it is. At the moment, my format function is only:

function format (d)
    {
        return '<p>Working...</p>';
    }

Any thoughts?

allan

Sounds like the event is being triggered twice. But really we'd need a link to a test case showing the issue.

Well I was not getting an error

The error filtering in your browser's debug console is probably on then. It would be worth checking that as the error messages can be useful.

Allan

QuesnelJ

Unfortunately, this is all being developed on an intranet server. Sending you a link is not doable.

Previous to complaining that the child data was showing twice, I added an alert () to see if the event was being triggered twice. It is not.

Regarding the error, I am not getting any errors on my debug console.

allan

Are you able to use JSFiddle or http://live.datatables.net to create a test case showing the issue please? I'm afraid I really don't know what is wrong with it without being able to see and understand the code and having it running greatly increases my ability to understand what is going on and debug it.

Allan

QuesnelJ

I totally understand what you are saying. I wouldn't want to blindly debug someone else's code either.

This however is quite involved. We are using the MVC, Ajax, server side processing and a bunch of other stuff. That said, stuff is all over the place.

Since tomorrow is my last day on this project until the fall, I think I will leave it as is. Someone else can spend the summer fixing it.

If the problem still exists in September, then I'll bug the forum again.

Thanks for all your help, and enjoy the summer.

allan

Hah - fair enough. See you in September

Allan

QuesnelJ

Hello all,

September has returned, and so have I. Unfortunately, in my absence no one tried to resolve this issue. So, with the help of all here, I am hoping to resolve it.

When I click "Expand", The following code gets inserted into the DOM:

<tr>
<td colspan="4">It works...</td>
<td>It works...</td>
</tr>

Obviously the second <td> line is extraneous.

I have checked through my debugger, and my ajax only gets triggered once, as it is suppose to.

That said, I have no idea where the second line comes from.

kthorngren

In the [Child Rows] example the format function is returning a full table structure.

Code snippet:

return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+

You probably need to do the same.

Kevin

QuesnelJ

Thank you very much for your reply Sir.

Based on your suggestion, I got things working.

Thank you and all for your great support and help.