Child Rows

mcaleer

Hey everyone, I am trying to add the "child rows" to my current datatable. I tried to follow the example shown here: https://datatables.net/examples/api/row_details.html but it seems as though it breaks my table. Looking for someone to give me a pointer on how to get it working. The table i am trying to add it to can be found here: http://www.nythermal.com/index.php?page=parts-list . Appreciate the help !

mcaleer

Bump -- Could really use some help here... Doesn't sound too difficult but clearly i am doing something wrong.

allan

Hi,

Thanks for the link. I've just tried it and the child rows in your table appear to work okay for me (Chrome / Mac).

There are a number of errors on the page, including 404 and Javascript errors, which might has some impact and I would suggest resolving them, but I'm afraid I don't see the issue immediately.

Allan

mcaleer

It works but it doesn't work. Is there a way to do the same thing without using Ajax?

mcaleer

I am pulling data from a Module inside of CMS Made Simple.. This is my current code:

    <script type="text/javascript">
  $(document).ready(function () {

      var table = $('#five_year').DataTable({});

      // Add event listener for opening and closing details
      $('#five_year tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );

    </script>

<table id="five_year" class="display" cellspacing="0">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Part #</th>
<th>Models</th>
<th>Description</th>
<th>Select</th>
</tr>
</thead>
<tfoot><tr>
<th></th>
<th>Item</th>
<th>Part #</th>
<th>Models</th>
<th>Description</th>
<th>Select</th>
</tr>
</tfoot>
<tbody>

{foreach from=$items item=entry}

<tr>
<td class="details-control"></td>
<td style='text-align: center'>{$entry->fields.item->value}</td>
<td style='text-align: center'><a rel="lightbox" style='text-decoration:underline' href="{$entry->file_location}/{$entry->fields.image->value}">{$entry->product_name}</a></td>
<td>{$entry->details}</td>
<td>{$entry->fields.description->value}</td>
<td style='width: 70px; text-align: center'>{Cart2 sku={$entry->product_name}}</td>

</tr>
<script type="text/javascript">
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>List Price:</td>'+
            '<td>{$entry->price}</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Link:</td>'+
            '<td>url here</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}
</script>
{/foreach}

The "return function" for the child rows will not properly pull the data from my source. For example: {$entry->price} is pulling the price for one product and is applying it to every product in the table.. Each product has their own price so im not sure why it is only grabbing one price and using it for everything.

You can see here: http://www.nythermal.com/index.php?page=parts-list that everything has a price of 545.4 which is incorrect.

But yet, when you view the page source, it appears that all the correct prices are found.

Any Ideas?

allan

Sounds like your code is generating a static function for the row details. I would suggest using a function that uses the Javascript object d rather than the template value of {$entry->price}.

Allan

mcaleer

Allan, I really appreciate the prompt reply's. I am definitely no expert when it comes to datatables. Do you mind explaining your last comment with a bit more detail or a quick sample of what you mean?

• Steve

allan

In this example - take a look at line 7 in the Javascript code block below the table - it uses the data from the row passed in.

Creating a function for each row isn't going to work, since only the last row will "win" (you would just be overwriting exisiting functions called format if you did that).

Allan

mcaleer

Please excuse my little knowledge as I am trying my best to understand.

Line 7 shows:

'<td>'+d.name+'</td>'+ ..  

( This is pulling the name from Ajax is it not? )

If i am not using Ajax I don't quite understand how to make the function work.

'<td>'+d.price+'</td>'+

How would i then use the {$entry->price} ?

I feel like this should be rather simple but I seem to be overlooking the solution.

mcaleer

Bump - Ill buy beer for who ever can help me get this working lol

allan

How would i then use the {$entry->price} ?

You wouldn't since it doesn't exist in that context.

What I would suggest you do is something like this in your r ow template:

<tr data-price="{$entry->price}" data-name="{$entry->name}" ...>
  <td>...</td>
  ...
</tr>

i.e. as well as your existing visible data in the columns, add data-* attributes to contain the data that you don't want the users to be able to see directly in the table columns.

Then, modify the call to format() to simply be:

format( row )

so you are passing in the row object.

Now you can use:

$( row.node() ).data( 'price' )

to access the price or any of the other data points added.

Allan

mcaleer

Allan,

In your example above what made you pick data-name="{$entry-name}",

{$entry-name} is in fact a variable within my data so i feel as though it will grab that data and confuse it? Can the name be anything? Such as data-name="cost".

So then in my code above line 50 would =

<tr data-price="{$entry->price}" data-name="cost" >

and then row 61 would =

function format ( row ) {

After that you say to use

$( row.node() ).data( 'price' )

With reference to my above code where would that be placed?