Multiple Child Rows - I have two "Strings" within the Child Values.....Each one should produce a Row

Multiple Child Rows - I have two "Strings" within the Child Values.....Each one should produce a Row

cemlimitedcemlimited Posts: 36Questions: 9Answers: 0
edited March 2022 in DataTables
    function format(value) {
               

                return  '<tr>' + value[0].replace('|', '"') + '</tr>' + '<tr>' + value[1].replace('|', '"') + '</tr>' ;
            }

   $(document).ready(function(){
 table<?php echo $x; ?>.on('click', 'td.details-control', function () {
                    var tr = $(this).closest('tr');
                    var row = table<?php echo $x; ?>.row(tr);
                    var teststring = {children: [tr.data('child-value-1'),tr.data('child-value-2')]};

                    var childNodes = $();
                    for (var c of teststring.children){
                        childNodes = childNodes.add(c);
                    }
                    
                    if (row.child.isShown()) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                    } else {
                        // Open this row
                        row.child(format(childNodes)).show();
                        tr.addClass('shown');
                       
                       
                    }
                });

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

Answers

  • cemlimitedcemlimited Posts: 36Questions: 9Answers: 0

    Also - Why are my Child rows not formatted as per the parent?

  • cemlimitedcemlimited Posts: 36Questions: 9Answers: 0

  • kthorngrenkthorngren Posts: 17,759Questions: 25Answers: 4,216

    Its hard to say what to do in your format function without seeing the source data.

    Why are my Child rows not formatted as per the parent?

    Are you referring to the length of the row? Looks like the length of the data is wider than the container the table is in. You will probably need to add some custom styling to the HTML you are returning.

    The best way for use to help is for you to provide a test case with an example of you data and child rows. This will allow us to see what is happening and offer more specific help.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • cemlimitedcemlimited Posts: 36Questions: 9Answers: 0
    edited March 2022

    Thanks Kevin....The fomat I was talking about was the Column Width...Not the Colours...

    The problem I have is that I am putting 2 strings into 2 "Row values" - data-child-valu-1 and 2...These are then used in teh javascript above to add two complete rows...to the table.

    Is there an easier way?

    Hard to past the raw test case as it has database links through php and mysql.

    <tr data-child-value-1="<td></td><td>Maria Correa</td><td>Live Plan</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td>" data-child-value-2="<td></td><td>Maria Correa</td><td>Non Charge</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td>"><td class="details-control"></td><td><a href="">Maria Correa</a></td><td>Planned Fee</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td><td>0.00</td></tr>
    </tbody>
    <tfoot>

  • kthorngrenkthorngren Posts: 17,759Questions: 25Answers: 4,216

    Hard to past the raw test case as it has database links through php and mysql.

    Get a few sample rows of data using the browser's network inspector. Create a Javascript sourced test case similar to this example. The test case doesn't need to be your full solution. The test case just needs enough code to replicate the issue.

    Kevin

  • cemlimitedcemlimited Posts: 36Questions: 9Answers: 0

    HHHHHHHHHHHEEEEEEEEEEEEEEEEEEEELP

  • kthorngrenkthorngren Posts: 17,759Questions: 25Answers: 4,216

    You don't have the proper Javascript libraries so your test case isn't running. I used the Download Builder to fix that problem:
    https://jsfiddle.net/gbe9051y/

    There are still errors with the test case. Is #example11 supposed to be the main table or the child table?

    The test case is generating this error:

    Uncaught ReferenceError: table11 is not defined

    Please update the test case so that it demonstrates the issue you want fixed.

    Kevin

  • cemlimitedcemlimited Posts: 36Questions: 9Answers: 0

    https://jsfiddle.net/cemlimited/pqc6jhgu/51/ - I have updated the libraries

  • cemlimitedcemlimited Posts: 36Questions: 9Answers: 0

    It is saying that replace is not a function

  • kthorngrenkthorngren Posts: 17,759Questions: 25Answers: 4,216

    I see that. Looks like the value you are passing into the format function is a jquery object not a string. I'm not sure what value is in your actual solution but that needs to be replicated.

    Kevin

  • cemlimitedcemlimited Posts: 36Questions: 9Answers: 0

    The Value is posted from the Click...I will amend to be an alert to see..

  • cemlimitedcemlimited Posts: 36Questions: 9Answers: 0

    It should be the data-child-value-1

  • cemlimitedcemlimited Posts: 36Questions: 9Answers: 0

    I have amended the Fiddle to a single item submitted ....and it works......How do I send two items though

  • kthorngrenkthorngren Posts: 17,759Questions: 25Answers: 4,216

    Do you have a new link to the fiddle?

    Kevin

  • cemlimitedcemlimited Posts: 36Questions: 9Answers: 0

    Sorry 65 worked with one item

  • cemlimitedcemlimited Posts: 36Questions: 9Answers: 0

    69 - I tried to follow the instructions from a string on the forum for Child Nodes to send an array within the format....Throws a problem

  • cemlimitedcemlimited Posts: 36Questions: 9Answers: 0

    https://jsfiddle.net/cemlimited/pqc6jhgu/74/

    Tried sending the two items to the function also....

  • kthorngrenkthorngren Posts: 17,759Questions: 25Answers: 4,216

    I looked at this test case:
    https://jsfiddle.net/cemlimited/pqc6jhgu/65/

    Your code is causing the HTML to be invalid. For example:

    <td style="background-color:#00FF00|>6.00</td>
    

    It is missing the close quotes. Change using replace() with replaceAll(), like this updated test case:
    https://jsfiddle.net/8fvhaewb/

    Kevin

  • cemlimitedcemlimited Posts: 36Questions: 9Answers: 0

    Kevin, You are a genius......Thank you so so much,........Owe you a beer

  • cemlimitedcemlimited Posts: 36Questions: 9Answers: 0

    https://jsfiddle.net/cemlimited/pqc6jhgu/81/

    Kevin - One more question.....The column widths are not sustained in the new rows.....Is this possible?

  • kthorngrenkthorngren Posts: 17,759Questions: 25Answers: 4,216

    Try Allan's answer in this thread.

    Kevin

Sign In or Register to comment.