我有一个安装了表排序器的基本表,使用链接而不是在显示列上使用标题对隐藏列进行排序。这在Firefox, Safari, Chrome和Opera(我访问过的所有版本)中都能很好地工作,但在IE 7和8中,只能对表中的最后一列进行排序。其他人在jquery.tablesorter.js上收到"Line: 552 Error: 'undefined' is null或不是对象"(关闭缩小版本以尝试调试它)。遗憾的是,我不得不继续支持IE,因为42%的网页访问者使用ie8或更低版本。(不关心ie6或更低版本)。
研究表明,对象中缺少/多余的逗号可能是一个常见的原因,但我没有在我的代码中发现任何额外或缺失的逗号。最后一列可以很好地进行排序,但其他隐藏的列则不行。我确实证实了改变列的顺序只证明了最后一列是有效的而前面的3列是无效的。进一步的研究已经证明,显示一个列在该列上排序很好,所以它似乎与被隐藏的列有专门的关系。
下面是我的排序函数(除去一些无关的位)。如果您真的对完整的代码和表格感兴趣,请访问
function setUpSorting() {
var $search_results = $j('#search_results');
$search_results.tablesorter({
headers: {
0: {sorter: false},
1: {sorter: false},
2: {sorter: false} // sorting done on 3, 4, 5, and 6
}
});
var $sort_options = $j('#sort_options > a');
$sort_options.click(function (e) {
e.preventDefault();
var $this = $j(this);
var order;
if ($this.hasClass('selected_sort')) {
if ($this.hasClass('descending')) {
$this.removeClass('descending');
order = 0;
} else {
$this.addClass('descending');
order = 1;
}
} else {
$sort_options.removeClass('selected_sort descending');
$this.addClass('selected_sort');
order = 0;
}
var sorting;
if (this.id == 'sort_job') {
sorting = [[3, order]];
} else if (this.id == 'sort_dept') {
sorting = [[4, order]];
} else if (this.id == 'sort_salary') {
sorting = [[5, order]];
} else if (this.id == 'sort_date') {
// switch the order for this one
if (order == 1) {
sorting = [[6, 0]];
} else {
sorting = [[6, 1]];
}
}
$search_results.trigger('sorton', [sorting]);
});
// initial sort
$j('#sort_date').click();
}
下面是表格的基本布局:
<table>
<thead class="hidden">
<tr><th id="job_dept_titles" scope="col">Job/Dept Title</th></tr>
<tr><th id="salary_hours" scope="col">Salary/HPW</th></tr>
<tr><th id="start_app" scope="col">start application</th></tr>
<tr><th id="sorting_job_title" class="hidden" scope="col">Job Title</th></tr>
<tr><th id="sorting_dept" class="hidden" scope="col">Dept Title</th></tr>
<tr><th id="sorting_salary" class="hidden {sorter: 'digit'}" scope="col">salary</th></tr>
<tr><th id="sorting_date" class="hidden" scope="col">date posted</th></tr>
</thead>
<tfoot><tr></tr></tfoot>
<tbody>
<tr>
<td headers="job_dept_titles">
Super cool job <span class="new_line">Super cool department</span>
</td>
<td headers="salary_hours">$3242<span class="new_line">Full Time</span></td>
<td headers="start_app"><a..>Start my app</a></td>
<td headers="sorting_job_title" class="hidden">Super cool job</td>
<td headers="sorting_dept" class="hidden">Super cool department</td>
<td headers="sorting_salary" class="hidden">3242</td>
<td headers="sorting_date" class="hidden">20110901</td>
</tr>
</tbody>
</table>
我有一种感觉,这是我错过了一些愚蠢的东西,因为我已经试图弄清楚这个几个星期了。
IE是臭名昭著的错误计算cellIndex,修补错误,然后忘记错误在下一个版本,并再次修补它。您需要为tablesorter添加一个用于确定单元格索引的函数。将此函数插入到tableorter设置标题索引并更改来自单元格的所有引用的位置。getCellIndex(cell);
function getCellIndex(aCell) {
aRow = aCell.parentNode;
for (i = 0; i != aRow.cells.length; i++) {
if (aRow.cells[i] == aCell) return i;
}
return false;
}