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
cemlimited
Posts: 36Questions: 9Answers: 0
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
Also - Why are my Child rows not formatted as per the parent?
Its hard to say what to do in your format function without seeing the source data.
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
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>
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
https://jsfiddle.net/cemlimited/pqc6jhgu/37/
HHHHHHHHHHHEEEEEEEEEEEEEEEEEEEELP
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
#example11supposed to be the main table or the child table?The test case is generating this error:
Please update the test case so that it demonstrates the issue you want fixed.
Kevin
https://jsfiddle.net/cemlimited/pqc6jhgu/51/ - I have updated the libraries
It is saying that replace is not a function
I see that. Looks like the
valueyou 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
The Value is posted from the Click...I will amend to be an alert to see..
It should be the data-child-value-1
I have amended the Fiddle to a single item submitted ....and it works......How do I send two items though
Do you have a new link to the fiddle?
Kevin
https://jsfiddle.net/cemlimited/pqc6jhgu/66/
Sorry 65 worked with one item
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
https://jsfiddle.net/cemlimited/pqc6jhgu/74/
Tried sending the two items to the function also....
I looked at this test case:
https://jsfiddle.net/cemlimited/pqc6jhgu/65/
Your code is causing the HTML to be invalid. For example:
It is missing the close quotes. Change using
replace()with replaceAll(), like this updated test case:https://jsfiddle.net/8fvhaewb/
Kevin
Kevin, You are a genius......Thank you so so much,........Owe you a beer
https://jsfiddle.net/cemlimited/pqc6jhgu/81/
Kevin - One more question.....The column widths are not sustained in the new rows.....Is this possible?
Try Allan's answer in this thread.
Kevin