Question

I have a basic table with tablesorter installed, sorting on hidden columns using links rather than using headers on the displayed columns. This works beautifully in Firefox, Safari, Chrome, and Opera (all versions each that I’ve had access to), but in IE 7 and 8 only the last column in the table can be sorted. The others receive “Line: 552 Error: ‘undefined’ is null or not an object” on the jquery.tablesorter.js (switched off the minified version to try to debug it). Sadly I do have to continue supporting IE as 42% of my page visitors use IE 8 or lower. (Don’t care about IE 6 or lower though).

Research has turned up possibilities of missing/extra commas in objects being a common cause, but I’ve not found any extra or missing in my code. The last column works fine for sorting, but not any of the other hidden. I did confirm that changing the order of the columns only proves that it’s the last column that works and the prior 3 do not.
— UPDATE further research has proved that showing a column sorts just fine on that column, so it appears to have to do specifically with the column being hidden.

Below is my function for sorting (with some extraneous bits stripped out). If you’re really curious for the full code and table, here’s the live site

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();
}

Here’s a basic layout of the table:

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

I have a feeling it’s something stupid I’m missing, as I’ve been trying to figure this one out for a few weeks now. Any help would be appreciated.

Answer 1

IE is notorious for miscalculating cellIndex, patching the bug, and then forgetting about the bug in the next version and patching it again. You need to patch tablesorter with a function for determining the cell index. Insert this function into the place where tablesorter sets the header index and change the all references from cell.cellIndex to 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;
}