Child rows with no tr tags.

Child rows with no tr tags.

QuesnelJQuesnelJ Posts: 9Questions: 1Answers: 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: 525Questions: 0Answers: 74

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

  • bindridbindrid Posts: 525Questions: 0Answers: 74

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

  • allanallan Posts: 41,522Questions: 1Answers: 5,198 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: 9Questions: 1Answers: 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: 63Questions: 2Answers: 13

    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: 9Questions: 1Answers: 0

    Here is my DataTables trace debug code: efewah.

  • QuesnelJQuesnelJ Posts: 9Questions: 1Answers: 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: 41,522Questions: 1Answers: 5,198 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: 9Questions: 1Answers: 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: 9Questions: 1Answers: 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: 41,522Questions: 1Answers: 5,198 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: 9Questions: 1Answers: 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: 41,522Questions: 1Answers: 5,198 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: 9Questions: 1Answers: 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: 41,522Questions: 1Answers: 5,198 Site admin

    Hah - fair enough. See you in September :)

    Allan

Sign In or Register to comment.