Сортировка таблицы с неизвестным количеством заголовков с помощью jQuery Table Sort, затем сортировка только по 2 заголовкам - PullRequest
Новая
       10

Сортировка таблицы с неизвестным количеством заголовков с помощью jQuery Table Sort, затем сортировка только по 2 заголовкам

2 голосов
/ 07 марта 2012

Сценарий

У меня есть таблица на веб-странице, которая динамически генерируется с использованием JSP. Количество столбцов / заголовков является переменным (может быть от 6 или до 40+). Я использую jQuery Tablesorter для сортировки таблицы. В данный момент таблица должна сортироваться только по элементам заголовка 5 и 6.

Вопрос

Использование Tablesorter позволяет установить для некоторых элементов заголовка значение false , отключив их в параметрах сортировки. Поскольку количество заголовков является переменным, мне нужен способ инвертирования параметров, чтобы я мог установить для параметра сортировщика значение true, а остальные по умолчанию отключены. Либо так, либо мне нужен способ получить общее количество элементов заголовка и выполнить цикл, чтобы установить для них значение false.

Синтаксис немного сложен для меня, так как я не уверен, как пройтись по следующему: 

$(document).ready(function() { 
        $("table").tablesorter({ 
            headers: { 
                0: { 
                    sorter: false 
                }, 
                1: { 
                    sorter: false 
                } 
                .
                .
                .
            } 
        }); 
    });

Так что в этом примере я хочу отсортировать только два: "Первичная болезнь" и "Индекс риска" .

Код

Другая небольшая проблема заключается в том, что у меня есть строка, которая должна появиться над заголовком таблицы. Это в основном более высокий уровень заголовка для табличной информации. Вот скрипка с моим кодом.

CSS 

th.headerSortUp { 
    background-image: url(../img/small_asc.gif); 
    background-color: #3399FF; 
}
th.headerSortDown { 
    background-image: url(../img/small_desc.gif); 
    background-color: #3399FF; 
}
th.header { 
    background-image: url(../img/small.gif);     
    cursor: pointer; 
    font-weight: bold; 
    background-repeat: no-repeat; 
    background-position: center left; 
    padding-left: 20px; 
    border-right: 1px solid #dad9c7; 
    margin-left: -1px; 
}

JQuery 

$(document).ready(function() { 
    $("#myTable").tablesorter({ 
        headers: { 
            2: { 
                sorter: true
            }, 
            3: { 
                sorter: true
            } 
        } 
    }); 
});

HTML 

    <table border="3" cellspacing="2" cellpadding="3" valign="top" id="myTable" class="tablesorter">
      <thead>
        <tr>
          <th class="stopGapTH" colspan="4">
            Patient List - all
          </th>
          <th class="stopGapTH" colspan="99">
            Clinical Adherence Information
          </th>
        </tr>
        <tr height="30">
          <th width="10%" align="middle">
            Patient Name
          </th>
          <th width="5%" align="middle">
            DOB
          </th>
          <th width="5%" align="middle">
            Primary Disease
          </th>
          <th width="5%" align="middle">
            Risk Index
          </th>
          <th class="stopGapConditionHeader" align="middle">
            <a href="">Asthma</a>
          </th>
          <th class="stopGapConditionHeader" align="middle">
            <a href="">Bipolar Disorder</a>
          </th>
          <th class="stopGapConditionHeader" align="middle">
            <a href="">Chronic Kidney Disease</a>
          </th>
          <th class="stopGapConditionHeader" align="middle">
            <a href="">Chronic Obstructive Pulmonary Disease</a>
          </th>
          <th class="stopGapConditionHeader" align="middle">
            <a href="">Coronary Artery Disease</a>
          </th>
          <th class="stopGapConditionHeader" align="middle">
            <a href="">Depression</a>
          </th>
          <th class="stopGapConditionHeader" align="middle">
            <a href="">Diabetes</a>
          </th>
          <th class="stopGapConditionHeader" align="middle">
            <a href="">Dyslipidemia</a>
          </th>
          <th class="stopGapConditionHeader" align="middle">
            <a href="">Heart Failure</a>
          </th>
          <th class="stopGapConditionHeader" align="middle">
            <a href="">Hypertension</a>
          </th>
          <th class="stopGapConditionHeader" align="middle">
            <a href="">Peripheral Vascular Disease</a>
          </th>
          <th class="stopGapConditionHeader" align="middle">
            <a href="">Schizophrenia</a>
          </th>
          <th class="stopGapConditionHeader" align="middle">
            <a href="">Seizure Disorder</a>
          </th>
          <th class="stopGapConditionHeader" align="middle">
            <a href="">Transient Ischemic Attack</a>
          </th>
          <th class="stopGapConditionHeader" align="middle">
            <a href="">Preventive Care</a>
          </th>
          <th class="stopGapConditionHeader" align="middle">
            <a href="">Wellness</a>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr class="stopGapRow">
          <td>
            Louis Armstrong
          </td>
          <td>
            02/01/1987
          </td>
          <td>
            NA
          </td>
          <td>
            NA
          </td>
          <td class="stopGapCondition yellow">
            66%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition yellow">
            80%
          </td>
          <td class="stopGapCondition red">
            42%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition yellow">
            90%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition red">
            16%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition notApplicable">
            N/A
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition red">
            40%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
        </tr>
        <tr class="stopGapRow">
          <td>
            Bob Barker
          </td>
          <td>
            10/10/1951
          </td>
          <td>
            NA
          </td>
          <td>
            NA
          </td>
          <td class="stopGapCondition yellow">
            80%
          </td>
          <td class="stopGapCondition yellow">
            66%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition yellow">
            75%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition yellow">
            77%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition yellow">
            66%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition red">
            33%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
        </tr>
        <tr class="stopGapRow">
          <td>
            David Brinkley
          </td>
          <td>
            10/10/1951
          </td>
          <td>
            NA
          </td>
          <td>
            NA
          </td>
          <td class="stopGapCondition yellow">
            80%
          </td>
          <td class="stopGapCondition yellow">
            66%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition red">
            16%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition yellow">
            70%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition yellow">
            66%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition yellow">
            66%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition red">
            42%
          </td>
          <td class="stopGapCondition red">
            40%
          </td>
        </tr>
        <tr class="stopGapRow">
          <td>
            Tom Brokaw
          </td>
          <td>
            10/10/1954
          </td>
          <td>
            NA
          </td>
          <td>
            NA
          </td>
          <td class="stopGapCondition red">
            40%
          </td>
          <td class="stopGapCondition yellow">
            66%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition yellow">
            85%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition yellow">
            70%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition yellow">
            57%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition notApplicable">
            N/A
          </td>
          <td class="stopGapCondition yellow">
            71%
          </td>
          <td class="stopGapCondition red">
            40%
          </td>
        </tr>
        <tr class="stopGapRow">
          <td>
            Cad2 Sandy
          </td>
          <td>
            01/01/1955
          </td>
          <td>
            NA
          </td>
          <td>
            NA
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition yellow">
            66%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition yellow">
            75%
          </td>
          <td class="stopGapCondition yellow">
            62%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition yellow">
            63%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition yellow">
            60%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition notApplicable">
            N/A
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition yellow">
            60%
          </td>
          <td class="stopGapCondition yellow">
            66%
          </td>
        </tr>
        <tr class="stopGapRow">
          <td>
            Cad3 Sandy
          </td>
          <td>
            01/01/1955
          </td>
          <td>
            NA
          </td>
          <td>
            NA
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition yellow">
            60%
          </td>
          <td class="stopGapCondition yellow">
            75%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition yellow">
            63%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition yellow">
            57%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
        </tr>
        <tr class="stopGapRow">
          <td>
            Cad4 Sandy
          </td>
          <td>
            01/01/1955
          </td>
          <td>
            NA
          </td>
          <td>
            NA
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition red">
            33%
          </td>
          <td class="stopGapCondition red">
            37%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition yellow">
            63%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition notApplicable">
            N/A
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition yellow">
            66%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition yellow">
            80%
          </td>
          <td class="stopGapCondition yellow">
            83%
          </td>
        </tr>
        <tr class="stopGapRow">
          <td>
            Cad5 Sandy
          </td>
          <td>
            01/01/1955
          </td>
          <td>
            NA
          </td>
          <td>
            NA
          </td>
          <td class="stopGapCondition red">
            40%
          </td>
          <td class="stopGapCondition red">
            33%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition yellow">
            75%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition yellow">
            63%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition yellow">
            85%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition red">
            14%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
        </tr>
        <tr class="stopGapRow">
          <td>
            Alex Trebek
          </td>
          <td>
            10/10/1951
          </td>
          <td>
            NA
          </td>
          <td>
            NA
          </td>
          <td class="stopGapCondition red">
            33%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition red">
            16%
          </td>
          <td class="stopGapCondition yellow">
            75%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition yellow">
            63%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition yellow">
            66%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition red">
            33%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition yellow">
            80%
          </td>
          <td class="stopGapCondition red">
            40%
          </td>
        </tr>
        <tr class="stopGapRow">
          <td>
            Chucka Woolerya
          </td>
          <td>
            10/15/1951
          </td>
          <td>
            NA
          </td>
          <td>
            NA
          </td>
          <td class="stopGapCondition yellow">
            83%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition yellow">
            66%
          </td>
          <td class="stopGapCondition red">
            42%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition yellow">
            54%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition yellow">
            71%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition green">
            100%
          </td>
          <td class="stopGapCondition red">
            0%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
          <td class="stopGapCondition yellow">
            50%
          </td>
        </tr>
      </tbody>
    </table>

РЕДАКТИРОВАТЬ: поэтому заголовки «Список пациентов - все» и «Информация о клинической приверженности» - это заголовки 0 и 1. Таким образом, заголовки «Первичная болезнь» и «Уровень риска» на самом деле 5 и 6.

EDIT2: необходимо работать с IE8 +.

1 Ответ

5 голосов
/ 07 марта 2012

Возможно, было бы проще, если бы вы попробовали мой форк tablesorter на github, который позволяет вам применять имена классов к заголовку , чтобы отключить сортировку.Тогда все, что вам нужно сделать, это примерно так: 

$('table thead th')
  .addClass('sorter-false')
  .filter(':eq(2), :eq(3)').removeClass('sorter-false');

Хорошо, попробуйте этот метод ( demo ): 

var headers = {},
    $table = $('#myTable'), i,
    l = $table.find('thead th').length,

    // columns 0 and 1 are the top row "Patient List - all"
    // and "Clinical Adherence Information"
    sortcolumns = [2, 3, 4, 5];

// build headers object; based on sortcolumn selections
for (i = 0; i < l; i++) {
    if ($.inArray(i, sortcolumns) < 0) {
        headers[i] = {
            sorter: false
        }
    }
}
$table.tablesorter({
    widgets: ['zebra'],
    headers: headers // headers object built above
});
...