使用jQuery Table Sort对包含未知头数的表进行排序,然后仅对2个头进行排序

时间:2012-03-06 21:19:32

标签: jquery html tablesorter

情景

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

问题

使用Tablesorter可以set certain header elements to false,从排序选项中禁用它们。由于标头的数量是可变的,我需要一种反转选项的方法,这样我就可以将sorter选项设置为true,其余的默认情况下都是禁用的。或者,或者我需要一种方法来获取标题元素的总数并通过循环将它们设置为false。

语法对我来说有点棘手,因为我不知道如何循环以下内容:

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

因此,在本例中我唯一想要排序的是“主要疾病”和“风险指数”

守则

另一个小问题是我有一行需要出现在表头之上。它基本上是表信息的更高级别标题。 Here's a fiddle我的代码。

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 个答案:

答案 0 :(得分:4)

如果你在github上尝试使用tablesorter的分支,可能会更容易,这允许你apply class names to the header禁用排序。那么你需要做的就是这样:

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