使用jQuery Table Sort对标题未知的表进行排序，然后仅对2个标题进行排序

Question

场景

我在使用JSP动态生成的网页上有一个表。列/标题的数量是可变的（最多6个或最多40个以上）。我正在使用jQuery Tablesorter对表进行排序。该表目前仅应按标题元素5和6排序。

问题

使用Tablesorter允许您将某些标头元素设置为false，将它们从sort选项中禁用。由于标题的数量是可变的，因此我需要一种反转选项的方式，以便可以将sorter选项设置为true，而其余默认情况下处于禁用状态。要么，要么，我需要一种方法来获取标头元素的总数并通过循环将其设置为false。

语法对我来说有点棘手，因为我不确定如何遍历以下内容：

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

因此，在此示例中，我要排序的仅有两个是“原发性疾病”和“风险指数”。

代码

另一个小问题是我需要在表标题上方显示一行。基本上，这是表信息的较高级别的标题。这是我的代码的摆弄。

的CSS

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

jQuery的

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

的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="stopGa

    

Answer 1

如果您在github上尝试了我的tablesorter分支，可能会更容易，它允许您将类名应用到标头以禁用排序。然后，您需要做的就是这样：

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