js点击表头即可排序

基础概念

点击表头进行排序是一种常见的用户界面交互方式，允许用户通过点击表格的列标题来对表格数据进行排序。这种功能通常在前端开发中实现，使用JavaScript来处理点击事件并重新排列数据。

类型

升序排序：从小到大排列数据。
降序排序：从大到小排列数据。

应用场景

数据分析工具：用户需要快速查看和分析数据。
电子商务网站：按价格、销量等排序商品列表。
管理后台：管理员查看和管理数据时进行排序。

实现示例

以下是一个简单的JavaScript示例，展示如何实现点击表头进行排序的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Sorting</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
        }
        th {
            background-color: #f2f2f2;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <table id="myTable">
        <thead>
            <tr>
                <th onclick="sortTable(0)">Name</th>
                <th onclick="sortTable(1)">Age</th>
                <th onclick="sortTable(2)">Country</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>25</td>
                <td>USA</td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>30</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td>Alice Johnson</td>
                <td>22</td>
                <td>UK</td>
            </tr>
        </tbody>
    </table>

    <script>
        function sortTable(n) {
            var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
            table = document.getElementById("myTable");
            switching = true;
            dir = "asc"; 
            while (switching) {
                switching = false;
                rows = table.rows;
                for (i = 1; i < (rows.length - 1); i++) {
                    shouldSwitch = false;
                    x = rows[i].getElementsByTagName("TD")[n];
                    y = rows[i + 1].getElementsByTagName("TD")[n];
                    if (dir == "asc") {
                        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                            shouldSwitch = true;
                            break;
                        }
                    } else if (dir == "desc") {
                        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                            shouldSwitch = true;
                            break;
                        }
                    }
                }
                if (shouldSwitch) {
                    rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
                    switching = true;
                    switchcount ++;
                } else {
                    if (switchcount == 0 && dir == "asc") {
                        dir = "desc";
                        switching = true;
                    }
                }
            }
        }
    </script>
</body>
</html>

可能遇到的问题及解决方法

排序不稳定：如果两个元素相等，可能会出现不稳定的排序。解决方法是在比较时添加一个次要的排序条件。
性能问题：对于大型数据集，排序可能会很慢。可以考虑使用更高效的排序算法或分页显示数据。
复杂数据类型排序：对于日期、数字等复杂数据类型，需要确保正确处理这些类型的比较。

解决方法示例

对于复杂数据类型的排序，可以修改比较逻辑：

function sortTable(n) {
    var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
    table = document.getElementById("myTable");
    switching = true;
    dir = "asc"; 
    while (switching) {
        switching = false;
        rows = table.rows;
        for (i = 1; i < (rows.length - 1); i++) {
            shouldSwitch = false;
            x = rows[i].getElementsByTagName("TD")[n];
            y = rows[i + 1].getElementsByTagName("TD")[n];
            if (dir == "asc") {
                if (isNaN(x.innerHTML)) {
                    if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
                        shouldSwitch = true;
                        break;
                    }
                } else {
                    if (Number(x.innerHTML) > Number(y.innerHTML)) {
                        shouldSwitch = true;
                        break;
                    }
                }
            } else if (dir == "desc") {
                if (isNaN(x.innerHTML)) {
                    if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
                        shouldSwitch = true;
                        break;
                    }
                } else {
                    if (Number(x.innerHTML) < Number(y.innerHTML)) {
                        shouldSwitch = true;
                        break;
                    }
                }
            }
        }
        if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
            switchcount ++;
        } else {
            if (switchcount == 0 && dir == "asc") {
                dir = "desc";
                switching = true;
            }
        }
    }
}

通过这种方式，可以确保数字和字符串都能正确排序。

页面内容是否对你有帮助？

有帮助

没帮助

如何阻止DataTable对动态添加到标头的子元素的单击排序？

、、、

e.stopPropagation()<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js/css/jquery.dataTables.min.css" rel="stylesheet"/> <script src="https://cdn.datatables.ne

浏览 0提问于2020-02-07得票数 1

回答已采纳

2回答

如何将表运算符中的低到高设置为缺省值？

、

我使用tablesorter jquery (jquery.tablesorter.js)对页面中的表信息进行排序。，，它运行得很好。我在表中添加了一个ID来对数据进行排序，如下所示：我使用以下脚本函数根据表对数据进行排序：$('#keywords').tablesorter(); 但我需要点击桌面数据将排序。例如:当我们打开页面时，表信息将根据低到高

浏览 1提问于2016-11-11得票数 1

3回答

如何使用Javascript datatable

、、、

我想使用Javascript来实现一个数据表，它可以通过点击表头来重新排序。有什么建议吗？

浏览 3提问于2011-06-24得票数 2

2回答

通过单击标题禁用表排序，但仍支持按下拉选项排序

、、、

现在，它允许两种方式对表内容进行排序：我的要求是只排序与下拉菜单。我想通过单击表标题来删除排序功能。谢谢

浏览 2提问于2012-08-17得票数 2

回答已采纳

1回答

透明列表-默认排序？

、

我使用的是和发现的玻璃列表教程，但这意味着您需要一个比较器来对行进行排序。然而，我似乎想不出如何添加对基于表头点击的排序的支持。

浏览 3提问于2012-05-03得票数 3

3回答

点击表表头排序

、、、

我在我的网站上有一个表单，用户可以使用它来按选择的列对数据表进行排序。我的尝试是将onclick事件添加到我的表头，并使用Javascript将相同的数组发送回页面。换句话说，单击第2列时的Array ( [orderby] => col_2 )将保持完全相同。

浏览 6提问于2014-09-13得票数 1

回答已采纳

1回答

Vue.js 2表格排序

、、

我正在尝试使用Vue.js 2创建一个可排序的表。我已经生成了一个表，现在只是想知道如何对这个表进行排序。{ Max : 54, Current : 45 我正在尝试使用Vue js2创建一个可排序的表。我已经生成了一个表，现在只是想知道如何对这个表进行排序。

浏览 18提问于2017-08-26得票数 3

回答已采纳

1回答

我如何将这个haml转换成一张桌子？

、、

我想把它渲染成一个表格，每一行都可以用同样的方式点击(例如，使用'post‘方法，这样只需要编辑haml文件而不接触其他文件)。理想情况下，我还希望能够按名称、时间或注释对表进行排序，但这可能超出了我的预期。那么，如何将此按钮列表更改为包含可单击行的表呢？

浏览 2提问于2010-05-20得票数 1

1回答

排序时取消选择表列

、

我有一个应用程序，它加载一个表点击一个按钮，目前的表排序选项已被删除，但每当我点击任何列，然后点击表头，选定的列应该取消选择。不确定如何实现这一点。提前感谢！

浏览 2提问于2015-02-06得票数 0

6回答

根据单击的标题单元格对表进行排序

、

浏览 0提问于2010-04-23得票数 4

回答已采纳

2回答

如何将键绑定到angular js中的排序类型？

、、、

有一个包含key:value data的get请求，现在我有了一个包含key和value的表头，我希望它像以前一样对值进行排序： <a href="#" ng-click="sortTypesortType == 'scenarioNo' && sortReverse" class="fa fa-caret-up"></span></th&g

浏览 1提问于2016-12-22得票数 0

1回答

很难让斑马行和表排序一起工作

、、

通过表排序，我谈论的是Jquery插件，它使得表头可点击。单击时，将按该特定表头对表进行排序。这是它的网站：我的问题是:当用户通过单击表标题对表进行排序时，斑马行不再起作用。

浏览 1提问于2011-06-28得票数 0

回答已采纳

1回答

如何设置用户点击表头改变排序顺序的函数

、

我想让用户点击表头对表格进行排序，但只能设置升序，不能在同一表头设置降序。

浏览 4提问于2009-07-07得票数 0

1回答

点击特定表头时禁用排序

、、

want to sort if by desc，this is ok.But when I click checkbox to select all checkbox infornt每一行时，它再次排序并选中变为未选中...当有人单击标题复选框时，我可以取消排序吗？我知道可以通过这种方式禁用通用排序，但这不是我的要求 { "bSortable": false },

浏览 2提问于2013-06-15得票数 1

回答已采纳

3回答

JTable防止所有排序

、、

是否有可能防止在JTable上进行所有排序？基本上，我不希望在用户单击表头时发生任何事情，并且使内容保持静态顺序。

浏览 8提问于2012-06-14得票数 2

1回答

当单击Vue js中的每个表头时，如何显示上升箭头和降箭头图像？

、、

我有一个列表页面，数据是用laravel抓取的，当我点击表头<th>排序时，升序和降序数据都会工作。当排序有效时，我需要显示箭头标记向下和向上。我的问题是:目前，当我单击一个表头<th>时，所有的表头箭头标记都会向下显示。我的意思是，当我点击“客户否”，“名字”和“姓氏”箭头标记显示向下和向上。其实我期待的结果是，当我点击一个表的头，箭头标记只反映一个。请检查下给出的图像和代码。任何帮助都将不胜感激。<td>@{{i

浏览 2提问于2016-07-03得票数 1

1回答

切换angular7中智能表组件中的排序图标

、、、、

我已经创建了具有排序、分页、过滤功能的自定义angular智能表组件。问题是排序工作正常，但我的表头排序图标运行不正常。我找到的例子很少，但它们都是针对angularJS的。例如，我正在尝试这样做：- <span *ngIf="!

浏览 3提问于2019-07-05得票数 0

1回答

如何将两个功能组合在一起

、

我想写一个函数，让用户点击表头双击，变成降序或升序，我已经完成了排序功能，但不知道怎么拼凑，现在我只是把其中一个放到表头中，如下所示：{ ><font color=white>District</font></a> </td>

浏览 12提问于2009-07-10得票数 0

1回答

禁用行排序后的JTableHeader更新

、、、、

我定制了一个带有TableCellRenderer过滤器图标的Jtable头，当用户点击过滤器图标时，就会出现像excel那样的弹出过滤器(图1)。但是，如果用户单击标题的文本，则应用行排序器。当应用行排序器(图2)时，它将覆盖自定义和筛选图标。是否有一种方法可以避免这种行为，同时将行排序器保留在表头上？

浏览 15提问于2022-05-03得票数 1

回答已采纳

3回答