Блог

В моем приложении у меня была страница с> 1000 строк, которая становилась смешной. Базовые данные были сильно структурированы, так что эта страница теперь загружает таблицу со всеми родительскими данными. У каждой родительской строки есть кнопка, при нажатии на которую создается дочерняя строка в таблице, а затем загружается в HTML (таблица всех дочерних элементов).

Я использую fork от @Mottie для Tablesorter, и его демонстрация показывает, что это должно работать; что при сортировке родительских столбцов дочерние таблицы остаются с родительскими. Но у меня это не работает должным образом, и я не могу понять, почему.

(Для справки, я использую Jinja2 для создания шаблонов, поэтому вы видите некоторые синтаксические конструкции в HTML ниже.)

Кто-нибудь может помочь мне понять, что происходит не так?

Вот JS родительской таблицы:

 <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>
  

Вот HTML родительской таблицы:

 <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>
  

Вот JS дочерней таблицы:

 <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>
  

Вот HTML дочерней таблицы:

 <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>
  

Я работал над вашим кодом, и что бы я сделал, так это перебрал таблицы, найдя открытые идентификаторы, сохранил их в массиве и удалил эти «tabledsorter-childRow», после этого я сделал итерацию по массиву идентификаторов и просто щелкнул еще разте, которые открыты, вот мой код:

 /* 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');
    });
}
  

Этот код должен идти в конце кода, когда пользователь попадает в столбец сортировки.

Дайте мне знать, как это происходит, надеюсь, это поможет,

Leo.

Вы пробовали что-то отличное от этого?

         $.get('/myurl?cohortid=' id, function(html) {
            parent.after('<tr class="added tablesorter-childRow"><td colspan="7" >' html '</td></tr>');
        });
  

Я думаю, вы могли бы принудительно добавлять элемент к таблице, и библиотека не смогла распознать эту строку. Не могли бы вы попробовать добавить html-код в ту же строку, что и родительский?

     $.get('/myurl?cohortid=' id, function(html) {
        parent.append('<div class="added">' html '</div>');
    });