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

【问题标题】：Sort table with unknown number of headers using jQuery Table Sort, then only sort on 2 headers使用 jQuery Table Sort 对标题数量未知的表进行排序，然后仅对 2 个标题进行排序
【发布时间】：2012-06-03 09:17:57
【问题描述】：

情景

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

问题

使用 Tablesorter 允许您 set certain header elements to false，从排序选项中禁用它们。由于标题的数量是可变的，我需要一种反转选项的方法，以便我可以将排序器选项设置为 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>

编辑：所以标题“Patient List - All”和“Clinical Adherence Information”是标题 0 和 1。所以标题“Primary Disease”和“Risk Level”实际上是 5 和 6。

EDIT2：需要使用 IE8+。

【问题讨论】：

  • “原发疾病”和“风险指数”的位置总是相同还是必须先找到？
  • 好问题。应始终位于位置 2 和 3。除非有重大代码更改，否则患者列表不会更改。谢谢！
  • 其实还需要更好的定义自己想要的规则……还是有点松散
  • 我想这需要进一步澄清，因为在主标题列表上方有两个标题。我将对问题进行编辑。
  • 看起来@fudgey 有你需要的东西

标签： jquery html tablesorter


【解决方案1】：

如果您在 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
});

【讨论】：

  • 没有冒犯您的技能或任何东西，但我宁愿不使用代码的分叉版本。这适用于需要长期依赖此代码的大公司。
  • 糟糕，抱歉 indexOf() 在 IE8 中不存在...所以改为使用 jQuery 的 $.inArray()，如下所示：$.inArray(i, sortcolumns) &lt; 0。我将更新上面的代码和演示。
猜你喜欢
  • 2020-09-20
  • 1970-01-01
  • 2021-11-27
  • 1970-01-01
  • 2017-12-28
  • 2019-07-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode