Child rows with no tr tags.

Child rows with no tr tags.

QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

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.

Replies

  • bindridbindrid Posts: 730Questions: 0Answers: 119

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

  • bindridbindrid Posts: 730Questions: 0Answers: 119

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

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    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

  • QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

    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?

  • HPBHPB Posts: 73Questions: 2Answers: 18

    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"]');
    
  • QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

    Here is my DataTables trace debug code: efewah.

  • QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

    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.

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    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

  • QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

    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.

  • QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

    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?

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    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

  • QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

    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.

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    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

  • QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

    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.

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    Hah - fair enough. See you in September :)

    Allan

  • QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    edited September 2017

    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

  • QuesnelJQuesnelJ Posts: 25Questions: 4Answers: 0

    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.

This discussion has been closed.