Q: Tablesorter nested tables - child rows (created on demand by user) don't sort with parents In my app I used to have a page with >1000 rows that was getting ridiculous.  The underlying data was highly structured, so that page now loads a table with all of the parent data.  Each parent row has a button that when clicked, creates a child row in the table and then loads in HTML (a table of all of the children).
I'm using @Mottie's fork of Tablesorter, and his demo shows that this should work; that when you sort the parent columns, the child tables stay with the parent.  But that's not working properly for me, and I can't figure out why.
(For background, I'm using Jinja2 for templating, which is why you see some of the syntax in the HTML below.)
Can anyone help me figure out what's going wrong?
Here's the JS of the parent table:
<script type="text/javascript">
$(function(){
    $.tablesorter.themes.bootstrap = {
      table        : 'table table-condensed table-bordered table-striped table-hover',
      caption      : 'caption',
      header       : 'bootstrap-header', // give the header a gradient background (theme.bootstrap_2.css)
      iconSortNone : 'bootstrap-icon-unsorted', // class name added to icon when column is not sorted
      iconSortAsc  : 'glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort
      iconSortDesc : 'glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort
    };  
    $("#seedcohorts").tablesorter({
        theme: 'bootstrap',
        sortList:[[3,0]],
        sortInitialOrder: 'asc',
        headerTemplate : '{content} {icon}',
        widgets : [ "uitheme", "zebra" ],
        widgetOptions : {
              zebra : ["even", "odd"],
            },
        dateFormat: 'mm/yyyy',
        selectorHeaders: '> thead > tr > th',
    });
});
$(document).ready(function(){ 
    $('#seedcohorts').on('click', ".toggleCohort", function () {
        var thisRow = $(this).parents('tr.adder');
        var hasNextRow = thisRow.next('tr.added').length;
        if (hasNextRow) {
            thisRow.next('tr.added').remove();
        } else {
            var parent = $(this).parents('tr.adder'), id = parent.attr('id');
            $.get('/myurl?cohortid='+id, function(html) {
                parent.after('<tr class="added tablesorter-childRow"><td colspan="7" >'+html+'</td></tr>');
            });
        }
    });
    $(document).on('click','a.collapsed', function () {
        var id = this.id;
        $(this).addClass('expanded');
        $(this).removeClass('collapsed');
        $('a#'+id+' button').html('<i class="fa fa-minus" aria-hidden="true"></i>');
    });
    $(document).on('click','a.expanded', function () {
        var id = this.id;
        $(this).addClass('collapsed');
        $(this).removeClass('expanded');
        $('a#'+id+' button').html('<i class="fa fa-plus" aria-hidden="true"></i>');
    });
});
</script>

Here's the HTML of the parent table:
<div class="table-responsive">
<table id="seedcohorts" class="tablesorter table table-striped table-bordered table-condensed table-hover" >
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">Name</th>
            <th scope="col">Location</th>
            <th scope="col">Date</th>
            <th scope="col">Number</th>
            <th scope="col">Dollar data</th>
            <th scope="col">Dollar data 2</th>
        </tr>
    </thead>
    <tbody>
        {% for entry in cohortlist %}
        <tr class="adder" id="{{entry.key().id()}}">
            <td>
                <a href="javascript:void(0)" id="{{entry.key().id()}}" class="toggleCohort collapsed">
                    <button class="btn btn-xs disabled"><i class="fa fa-plus" aria-hidden="true"></i></button>
                </a>
            </td>
            <td>{{ entry.name }}</td>
            <td>{{ entry.loc_city}}, {{entry.loc_country}}</td>
            <td>{{ entry.cohort_date.month }}/{{ entry.cohort_date.year }}</td>
            <td>{{ entry.num_cos }}</td>
            <td>${{ entry.total_value|newnumber }}</td>
            <td>${{ entry.total_funding|newnumber }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
</div>

Here's the JS of the child table:
<script type="text/javascript">
$(function(){
    $.tablesorter.themes.bootstrap = {
      table        : 'table table-condensed table-bordered table-striped table-hover',
      caption      : 'caption',
      header       : 'bootstrap-header', // give the header a gradient background (theme.bootstrap_2.css)
      iconSortNone : 'bootstrap-icon-unsorted', // class name added to icon when column is not sorted
      iconSortAsc  : 'glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort
      iconSortDesc : 'glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort
    };
$("#mytable-{{cohort.key().id()}}").tablesorter({
    theme: 'bootstrap',
    sortList:[[5,1]],
    sortInitialOrder: 'desc',
    headerTemplate : '{content} {icon}',
    widgets : [ "uitheme", "zebra" ],
    widgetOptions : {
          zebra : ["even", "odd"],
        },
    dateFormat: 'mm/yyyy',
    selectorHeaders: '> thead > tr > th',
    });
});
</script>

Here's the HTML of the child table:
<table id="mytable-{{cohort.key().id()}}" class="tablesorter-child table table-striped table-bordered table-condensed" >
    <thead>
        <tr>
            <th scope="col">Status</th>
            <th scope="col">Company</th>
            <th scope="col">Details</th>
            <th scope="col">Dollar value</th>
            <th scope="col"></th>
            <th scope="col">Dollar value 2</th>
        </tr>
    </thead>
    <tbody>
        {% for entry in listofcohortcompanies %}
        <tr>
            <td></td>
            <td>{{ entry.name }}</td>
            <td>{{ entry.website }}</td>
            <td>${{ entry.exit_value|newnumber }}</td>
            <td></td>
            <td>${{ entry.total_funding|newnumber }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>


A: I have been working on your code, and what I would do, is to iterate over the tables finding the id's that are open, store them in an array, and removing those "tabledsorter-childRow", after doing that what I did was to iterate over the ids array and just click again those ones that where open, here is my code:
/* Function for leaving the array with only unique id's */
function unique(array) {
    return $.grep(array, function(el, index) {
        return index === $.inArray(el, array);
    });
}

/* Find all id's of tablesorters that are open and store them in the variable "arrayIds" */
var arrayIds = [];
$('.tablesorter-childRow').each(function(item){
    arrayIds.push($(this).find('table').attr('id').split('-')[1]);
    //Here we remove the tables
    $(this).remove();
});

//Here we leave the array with only unique id's in case more than one is selected
arrayIds = unique(arrayIds);

//Lastly, we cycle through the id's, and also through each button so that we can click it again.
var i;
for (i = 0; i < arrayIds.length; ++i) {
    $('#seedcohorts a#'+arrayIds[i]).each(function(){                       
        $(this).click();
        $(this).find('i').removeClass('fa-plus').addClass('fa-minus');
    });
}

This code has to go at the end of the code when the user hits the sorting column.
Let me know how it goes, hope this helps,
Leo.

A: Have you tried something different from this?
        $.get('/myurl?cohortid='+id, function(html) {
            parent.after('<tr class="added tablesorter-childRow"><td colspan="7" >'+html+'</td></tr>');
        });

I think you could be forcing the element appending to the table and the library could not recognise that row. Could you try appending the html at the same row than the parent? 
    $.get('/myurl?cohortid='+id, function(html) {
        parent.append('<div class="added">'+html+'</div>');
    });

