Question

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

我想说的是，

让表格有4个标题，

S.no。，姓名，年龄，国家

现在每个字段都会有很多数据，比如

abc，21，usa
def，24，uk
ghj，51，india

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

当用户点击名称时，表格应按名称排序，如果他点击年龄，则应按年龄从较小到较大排序，对国家/地区相同。

可以成就吗？如果是，那怎么办？

提前感谢您的帮助。

Answer 1

正如@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 。

Answer 2

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

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

2 个答案: