您将如何为表实现排序机制？ [关闭]答案

【问题标题】：How would you implement a sorting mechanism for a table? [closed]您将如何为表实现排序机制？ [关闭]
【发布时间】：2018-09-07 02:29:45
【问题描述】：

我知道 Stack Overflow 不是为了解决我的问题，而是为了提出具体问题。但我需要为 html 表实现排序功能，但不知道该怎么做。用户应该能够单击列标题，然后表格应该按该列排序。该表如下所示：

【问题讨论】：

查看 sort() 并将其与 jquery 高级选择器一起使用来完成您的工作
我认为谷歌在这里会有所帮助。 tympanus.net/codrops/2009/10/03/…
什么类型的？这是一个jquery函数吗？
需要自己写，还是简单实现功能？有许多预先存在的解决方案可用于此：DataTables、jqGrid、TableSorter 等
您是否已经搜索过现有的解决方案？为什么不想使用它们？

标签： javascript jquery html-table

【解决方案1】：

如果你使用jquery，请使用datatables jquery插件。它是一个高度灵活的工具

http://www.datatables.net/

【讨论】：

+1 我喜欢那个工具；它非常灵活且可定制
是的，它的实现非常简单，并且支持很多功能。
但我从头开始编写它只是为了添加一个列:)

【解决方案2】：

有几个可用的插件可用于 jQuery。试试这个http://tablesorter.com

将此库添加到您的页面，如

<script type="text/javascript" src="<your-path>/jquery.tablesorter.js"></script>

将名为tablesorter 的类应用于您的表并说$(".tablesorter").tablesorter();

【讨论】：

【解决方案3】：

由于您使用的是 jquery，因此您可以使用 TableSorter 插件为您执行此操作。

有many others，所以请浏览一下，看看哪个最适合您的用例。

【讨论】：

【解决方案4】：

你可以使用List.js 原因

轻量级 [仅 3K 脚本]
使用类在您现有的 HTML 表格中轻松实现
可搜索、可排序和可过滤

HTML

<div id="my-list">
    <ul class="list">
       <li>
           <h3 class="name">Luke</h3>
       </li>
       <li>
           <h3 class="name">John</h3>
       </li>
    </ul>
</div>

Javascript

var options = {
    valueNames: ['name']
};
var myList = new List('my-list', options);

【讨论】：