基于表格中不同标题的css表格排序答案

【问题标题】：css table sorting based on different headings in the table基于表格中不同标题的css表格排序
【发布时间】：2014-02-13 21:36:55
【问题描述】：

我想创建一个动态的 CSS 表。

我想说的是，

让表格有4个标题，

编号、姓名、年龄、国家

现在每个字段都会有很多类似的数据

abc，21，美国
def，24，英国
ghj，51 岁，印度

现在我的意图是，此表将显示在网页上，并且仅包含固定数据。

当用户点击姓名时，表格按姓名排序，如果点击年龄，则按年龄从小到大排序，国家也一样。

小伙伴们可以吗？如果是，那么如何？

提前感谢您的帮助。

【问题讨论】：

我建议你使用Datatables plugin。
@alvaro。非常感谢。 :)
您能解释一下为什么要使用 css 表而不是真实表，以及为什么您认为区别对这个问题很重要吗？
@MrLister 你说的区别是什么意思？
CSS 中的表格和 HTML 中的真实表格的区别。对您要完成的任务而言，这应该无关紧要。

标签： javascript jquery html css

【解决方案1】：

我认为您需要一些 JavaScript 来执行此操作（使用 ajax 带来已排序的数据）

【讨论】：

这应该是评论吗？
我认为 OP 可能知道需要 Javascript（因为问题被标记为 Javascript）。而且由于数据是静态的，一旦你把它放在内存中，你就不需要 AJAX 再次从服务器中引入它了。
@MrLister OP 是什么意思？
原始海报。在这种情况下，提出问题的人。换句话说，你。

【解决方案2】：

正如@Alvaro 在评论中所建议的那样，dataTable 是您最好和最简单的选择。您只需将th 包装在thead 中，并将其他行包装在tbody 中，您就可以只使用一行：

$("#<ID_OF_YOUR_TABLE").dataTable();

一个工作示例是 here

编辑：- 在您的页面中使用。

将 jQuery 脚本添加到您的页面。

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

将DataTable CSS 和脚本添加到您的页面。

<link type="text/css" rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"/>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"></script>

然后在页面末尾的任何位置（您可以添加head 标签，但我更喜欢在末尾）：

<script>
$(function(){
    $("#<ID_OF_YOUR_TABLE>").dataTable();
});
</script>

编辑 2 :- 隐藏页脚信息

页脚信息被包裹在一个类为dataTables_info 的div 中。所以你可以使用display:none为这个类编写样式定义来隐藏它。我已经更新了 fiddle。

【讨论】：

嗨，伙计。谢谢回答。我如何使用这个 onload 到我的 html 页面？