在我的应用程序中，我曾经有一个包含＆gt; 1000行的页面变得荒谬可笑。底层数据是高度结构化的，因此页面现在加载包含所有父数据的表。每个父行都有一个按钮，单击该按钮时，会在表中创建一个子行，然后以HTML格式加载（所有子项的表格）。
我正在使用@ Mottie的fork of 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>
答案 0 :(得分：0)
我一直在研究你的代码，我会做的是迭代查找已打开的id的表，将它们存储在一个数组中，并删除那些“tabledsorter-childRow”，之后我做了什么确实是迭代了ids数组，然后再点击那些打开的，这里是我的代码：
/* 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');
});
}
当用户点击排序列时，此代码必须放在代码的末尾。
让我知道它是怎么回事，希望这有帮助，
利奥。
答案 1 :(得分：0)
你尝试过不同的东西吗？
$.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>');
});