Output table in table display all headers

[zoriax]

Hi Mottie,

I hope you're fine !

Today, I found a strange behaviour. When I try to output a second table in a child row (inside a tr). I always have strange behaviour with headers.
If I output the first table (parent), I have the values and header of parent but when I display child row (which contains a new table) and I try to output the parent table, I have the parent values and both parent and child headers. Same behavious If i output child table. I have correct values but both headers. I try to use output_headerRows but it works but sometimes I have the parent header, sometimes the child header.

Any idea or suggestion ?

Thank you

[Mottie]

Hi @ciadch!

Can you please provide an example.

[zoriax]

Yep for sure !

A simple code :

<a href="#" class="tooltips text-primary delegate-click-table-output" data-table="#table-parent">
EXPORT Parent
</a>
 <table id="table-parent" class="tablesorter-bootstrap">
      <thead>
         <tr>
           <th>Title parent</th>
         </tr>
      </thead>
      <tbody>
         <tr class="cursor delegate-toggle-table-child">
            <td>Data parent</td>
         </tr>     
         <tr class="tablesorter-child">
            <td>
               <a href="#" class="tooltips text-primary delegate-click-table-output" data-table="#table-child">
               EXPORT Child
               </a>
               <table id="table-child" class="tablesorter-bootstrap">
                  <thead>
                     <tr>
                       <th>Title child</th>
                     </tr>
                  </thead>
                  <tbody>
                     <tr>
                        <td>Data child 1</td>
                     </tr>
                     <tr>
                        <td>Data child 2</td>
                     </tr>
                  </tbody>
               </table>
            </td>  
         </tr>
      </tbody>
</table>

And my JS :

    $('table.tablesorter-bootstrap').tablesorter({
        theme               : 'bootstrap',
        widthFixed      : true,
        dateFormat      : 'ddmmyyyy',
        headerTemplate : '{content} {icon}',
        cssChildRow     : 'tablesorter-child',
        widgets         :   ['zebra', 'filter', 'output', 'uitheme'],
        widgetOptions : {
            // Set Zebra options
            zebra                   : ['even', 'odd'],
            // Set Filter options
            filter_childRows        : false,
            filter_columnFilters : true,
            filter_cssFilter        : 'form-control',
            filter_reset            : '.delegate-click-table-reset',
            filter_searchDelay  : 300,
            // Set Output options
            output_separator     : ';',
            //output_ignoreColumns : [],          
            output_hiddenColumns : false,           
            output_includeFooter : false,           
            output_dataAttrib    : 'data-output', 
            output_headerRows    : true,            
            output_delivery      : 'p',                 
            output_saveRows      : ':not(.tablesorter-child):visible',      
            output_duplicateSpans: false,        
            output_replaceQuote  : '\u201c;',
            output_includeHTML   : false,        
            output_trimSpaces    : true,        
            output_wrapQuotes    : false,       
            output_saveFileName  : 'Export-'+(new moment().format('YYYYMMDDHHmmss'))+'.csv',
            output_encoding      : 'data:application/octet-stream;charset=utf8,',
        }
    });

When I click on EXPORT parent my output is :

An when I click on EXPORT child, my output is :

As you can see, I have the child header in my parent output, but not the data.

Thanks for your help

[zoriax]

Maybe the problem is here :

 output_saveRows      : ':not(.tablesorter-child):visible',      

But I don't see how to correct it :-)

[Mottie]

Yes, that selector is the problem. I set up this demo, which includes these changes:

output_saveRows: 'v',
output_formatContent: function(config, widgetOptions, data) {
    // remove Export link text
    return data.content
        .replace(/\s+/g, ' ')
        .replace(/EXPORT\s(Parent|Child)/g, '');
},

It removes the export link text & also removes excessive white space, so the child row data ends up being displayed on one line. You can make the child table data show up in different rows if you change the format content function as follows (demo):

return data.content
    .replace(/\s{2,}/g, '\n')
    .replace(/EXPORT\s(Parent|Child)/g, '');

---

Update: Apparently I can't spell "Parnet"... I've updated the demos above LOL

[zoriax]

Hi @Mottie

Thanks for your demo. It looks better :-) !

But, what I want is to export only one "level" of table. When I click on EXPORT Parent, I only want parent table content (without child, without all under ".tablesorter-child") and when I click on EXPORT Child, I only want child. In your exemple, when I export the parent table, I have the child table content too. My question is, how to have only parent table content (for child it's ok, it works :-)) !

Thank you for your help !

[Mottie]

You know what, it is actually a selector problem inside of the output widget. It targets all thead cells, which includes the nested table. I'll have that fixed for you in the master branch here shortly (demo).

Thanks for your patience.

[zoriax]

Awesome ! Exactly what I want ! Big thank you for your help and your celerity :-)