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

cemlimited

    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

cemlimited

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

cemlimited

kthorngren

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

cemlimited

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>

kthorngren

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

cemlimited

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

cemlimited

HHHHHHHHHHHEEEEEEEEEEEEEEEEEEEELP

kthorngren

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

cemlimited

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

cemlimited

It is saying that replace is not a function

kthorngren

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

cemlimited

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

cemlimited

It should be the data-child-value-1

cemlimited

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

kthorngren

Do you have a new link to the fiddle?

Kevin

cemlimited

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

cemlimited

Sorry 65 worked with one item

cemlimited

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

cemlimited

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

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

kthorngren

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

cemlimited

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

cemlimited

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

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

kthorngren

Try Allan's answer in this thread.

Kevin