基于表中不同标题的css表排序 [英] css table sorting based on different headings in the table

问题描述

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

我想说的是，

让表格有4个标题，

S.no。，Name，Age，Country

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

1. abc，21，美国


2. def，24，uk


3. ghj ，51，india

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

当用户点击Name时，表格应按名称排序，如果他点击Age，则按年龄小于或大于国家排序。 / p>

可以做家伙吗？如果是，那么如何？

先感谢您的帮助。

解决方案

如@Alvaro在注释中建议， dataTable 是您最好的和最简单的选项。您只需要将 th 包含在 thead 和 tbody中的其他行，你只能用一行：

  $（＃< ID_OF_YOUR_TABLE）dataTable ）; 
  

一个工作示例是 此处

编辑： - 在您的信息页中使用。 >

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

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

添加 DataTable

 < link type =text / css =stylesheethref =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 tag但我更喜欢在结尾）：

 < script& 
 $（function（）{
 $（＃< ID_OF_YOUR_TABLE>）。dataTable（）; 
}）; 
< / script> 
 

编辑2 ： - 隐藏页脚信息

页脚信息被包装在一个具有 dataTables_info 类的div中。因此，您可以使用 display：none 编写此类的样式定义以隐藏它。我已更新 小提琴 。

I want to create a css table that shall be dynamic.

what i want to say is that,

let the table has 4 headings,

S.no., Name, Age, Country

now each field will have a lot of data like

1. abc, 21, usa
2. def, 24, uk
3. ghj, 51, india

now what my intention is that, this table will be displayed on a webpage and will contain just fixed data.

When a user clicks on Name, the table shall be sorted by Name, if he clicks on Age, it shall be sorted by Age smaller to larger, same for country.

Can it be done guys? If yes, then how?

Thanks in advance for all your help.

解决方案

As suggested by @Alvaro in comment, dataTable is your best and easiest option. You simply need to wrap your th in thead and other rows in tbody and you are good to go with only single line:

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

A working example is here

EDIT:- Using in your page.

Add jQuery script to your page.

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

Add DataTable CSS and Script to your page.

<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>

Then anywhere at end of page (you may add in head tag but I prefer at end):

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

EDIT 2 :- Hiding Footer Info

Footer info is wrapped in a div with class dataTables_info. So you can write the style definition for this class using display:none to hide it. I have updated the fiddle.

这篇关于基于表中不同标题的css表排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！