jquery

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

转载作者：太空宇宙更新时间：2023-11-04 15:20:44

场景

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

问题

使用 Tablesorter 可以让您 set certain header elements to false ，从排序选项中禁用它们。由于标题的数量是可变的，我需要一种反转选项的方法，以便我可以将排序器选项设置为 true，其余的默认情况下被禁用。要么，要么我需要一种方法来获取 header 元素的总数并运行一个循环以将它们设置为 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; 
}

$(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+。

最佳答案

如果您尝试我的 tablesorter fork ，也许会更容易在 github 上，它允许你 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
});

关于jquery - 使用 jQuery Table Sort 对标题数量未知的表格进行排序，然后仅对 2 个标题进行排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9592094/

文章推荐： c++ - 试图检测监视器

文章推荐： Java : reference one form from another form to append values

文章推荐： c++ - g++ 和 gcc 4.8 找不到 null_ptr？

sorting - 性能 : Sorting Slice vs Sorting Type (of Slice) with Sort implementation
我在玩一些代码挑战时发现自定义排序(排序接口(interface)的实现)比仅针对 slice 的原始结构要快得多。这是为什么？将 slice 转换为类型是否会产生一些魔力(例如转换为指向结构的指针
reactjs - 未找到规则 'simple-import-sort/sort' 的定义 simple-import-sort/sort
我正在使用 simple-import-sort eslint 插件进行 react 。我想我的 .eslintrc.js是对的，但我无法使这个特定的插件工作。我在文件的第一行收到以下错误: 未找到规
sorting - sort.Slice排序不正确
Closed. This question is not reproducible or was caused by typos。它当前不接受答案。想改善这个问题吗？更新问题，以便将其作为on-to
golang 不能在 sort.Sort 的参数中使用类型作为类型 sort.Interface
好的，所以我是 Go 的新手，我正在努力让自己熟悉按函数排序。我可能误解了什么，所以如果我错了请纠正我。我正在尝试创建一个包含字段 key 和 value 的 Nodes 数组。我想创建一个自定义排
sorting - `take n (sort xs)` ("sorted prefix") 问题的内存高效算法
我想从惰性列表中取出 n 个最大的元素。我听说在 Data.List.sort 中实现的合并排序是惰性的，它不会产生不必要的元素。就比较而言，这可能是正确的，但在内存使用方面肯定不是这样。下面的程序
javascript - 两个回调作为 Array.sort() 的参数，而不是 Array.sort().sort()
这个问题已经有答案了: Javascript sort function. Sort by First then by Second (10 个回答) 已关闭 3 年前。我正在尝试返回已排序产品的列
c++ - 成对 vector : first pair values are non-sorted and second pair values are sorted: how to find a sorted value when having the non-sorted one
我有一个 vector 对，如下所示。第一对值未排序，第二对值已排序(从零开始)。我可能想通过实现 std::vector 和 std::pair 来存储数据。当我有第一对值(未排序)时，找到相应的第
nstableview - swift 3 : Sort (formerly sort-in-place) array by sort descriptors
直到现在(Swift 2.2)我一直愉快地使用来自 this answer 的代码- 它迅速，优雅，它像梦一样工作。 extension MutableCollectionType where Ind
sorting - Golang Sort :does not implement sort. 接口(interface)(缺少 Len 方法)
我在我的 Go 应用程序中实现排序界面时遇到问题。这是相关代码: type Group struct { Teams []*Team } type Team struct { Point
sorting - table.sort 使用什么算法？
我很好奇 Lua 的默认算法是什么 table.sort使用，只是因为它比我遇到的其他一些排序算法慢。我也很好奇 Lua 的 table.sort是在引擎中用 C 编写的，或者如果它在 Lua 中的库
sorting - "partially sorted"的数学定义
例如，插入排序被描述为部分排序数组的有效算法。但如何精确定义“部分排序”呢？最佳答案这是一个只有少数元素不合适的数组。如果没有指定百分比或其他阈值，则部分排序和未排序之间没有严格的区别。正式定义
sorting - Thrust::sort 有多快以及最快的基数排序实现是什么
我是 GPU 编程的新手。最近，我正在尝试根据一个教程实现gpu bvh构建算法:http://devblogs.nvidia.com/parallelforall/thinking-parallel
sorting - Gnumeric Sort 函数
有人可以指导我 Gnumeric 排序函数的详细说明(链接)吗？ Gnumeric 手册很简短并且没有示例。我无法通过搜索引擎找到任何合适的信息，甚至 Stackoverflow 上也只有六个不合适的
Python sort and sorted -- 列表的列表如何精确排序？
在 Python 中使用什么精确规则来对列表进行排序，其中元素是列表？这可以表示为“key”或“cmp”吗功能？问题来自于有两件事考虑:长度和它们位置的值。 sorted([ [ 0, 1, 2
go - sort.Sort 不修改数组
下面的代码应该创建一个整数数组 (a) 并对它进行排序，但是 sort.Sort 似乎没有修改变量。 package main import ( "fmt" "sort" ) type
sorting - golang sort.Sort随机输出并且是错误的
我有一个应用于结构的自定义排序函数。完整代码是 here on play.golang.org . type Stmt struct { Name string After []st
对python3 sort sorted 函数的应用详解
python3 sorted取消了对cmp的支持。 python3 帮助文档： ?
algorithm - Shellsort - 如果一个数组是 g-sorted 然后 h-sorted，数组仍然是 g-sorted
以下是来自普林斯顿的 coursera 算法类(class)的练习。如果一个数组既是 3 次排序又是 5 次排序，那么它是否也是 6 次、7 次、8 次、9 次和 10 次排序？我知道任何序列如果先
algorithm - "A g-sorted array remains g-sorted even after h-sorting it"的含义是什么？
当我看到上面的语句时，我正在阅读 shell-sorting。这意味着什么？它对我看待 shell 排序的方式有何不同？ PS:我不是在寻找声明的证据。最佳答案好吧，你可能暗示下一个排序阶段不会“
mysql Sort aborted: Out of sort memory, consider increasing server sort buffer size的解决方法
今天在检查mysql服务器的时候提示Sort aborted: Out of sort memory, consider increasing server sort buffer size，安装字

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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

场景

问题

代码

CSS

jQuery

HTML