仅在IE中出现的jquery Tablesorter问题-用于排序的链接仅适用于最后一个隐藏列,而不是其他列



我有一个安装了表排序器的基本表,使用链接而不是在显示列上使用标题对隐藏列进行排序。这在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;
}

最新更新