Проблема jquery Tablesorter только в IE - ссылки для сортировки работают только в последнем скрытом столбце, а не в других - PullRequest
Новая
       16

Проблема jquery Tablesorter только в IE - ссылки для сортировки работают только в последнем скрытом столбце, а не в других

2 голосов
/ 07 октября 2011

У меня установлена ​​базовая таблица с таблицей сортировки, которая сортирует по скрытым столбцам, используя ссылки, а не заголовки отображаемых столбцов. Это прекрасно работает в Firefox, Safari, Chrome и Opera (все версии, к которым у меня был доступ), но в IE 7 и 8 можно отсортировать только последний столбец в таблице. Другие получают «Строка: 552 Ошибка:« undefined »является нулем или не является объектом» на jquery.tablesorter.js (отключил свернутую версию, чтобы попытаться отладить ее). К сожалению, я должен продолжать поддерживать IE, поскольку 42% посетителей моей страницы используют IE 8 или ниже. (Не заботьтесь о IE 6 или ниже).

Исследования выявили возможность пропущенных / лишних запятых в объектах, являющихся частой причиной, но я не нашел ни одного лишнего или отсутствующего в моем коде. Последний столбец отлично работает для сортировки, но не для других скрытых. Я подтвердил, что изменение порядка столбцов только доказывает, что работает последний столбец, а предыдущие 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>

У меня такое чувство, что я что-то глупо пропускаю, так как я пытаюсь выяснить это уже несколько недель. Любая помощь будет оценена.

1 Ответ

2 голосов
/ 21 октября 2011

IE печально известен тем, что неправильно вычисляет cellIndex, исправляет ошибку, а затем забывает об ошибке в следующей версии и исправляет ее снова.Вам необходимо установить табличный сортировщик с функцией определения индекса ячейки.Вставьте эту функцию в место, где tableorter устанавливает индекс заголовка и измените все ссылки с cell.cellIndex на 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;
}
...