javascript 如何对数据表中的列进行排序。JSF 2.0
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9971651/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to sort a Column in a dataTable. JSF 2.0
提问by Myy
I'm building a WebApp in jsf 2.0 and it's about storing information and displaying it on the screen. so I've put in some "http://java.sun.com/jsf/html" dataTables to disply some lists. My Java code returns a List and then displays them on screen. but now I have to Sort the columns alphabetically. I believe there's no built in way of doing this, so i'm goign to have to look elsewhere for the task.
我正在 jsf 2.0 中构建一个 WebApp，它是关于存储信息并将其显示在屏幕上。所以我放入了一些“http://java.sun.com/jsf/html”数据表来显示一些列表。我的 Java 代码返回一个列表，然后在屏幕上显示它们。但现在我必须按字母顺序对列进行排序。我相信没有内置的方法可以做到这一点，所以我不得不去别处寻找任务。
I came across This dataTables example, it's pretty awesome but I think I can't give it a List and display the list.
我遇到了这个 dataTables 示例，它非常棒，但我想我不能给它一个列表并显示列表。
I also came across BalusC's way of incorporating the sorting intot he DataTbal, which is nice, I'm looking for this, but maybe with a jQuery IU.
我还遇到了BalusC 将排序合并到 DataTbal 中的方法，这很好，我正在寻找这个，但也许使用 jQuery IU。
Is there such an API that can meet my needs? can you point me in the right direction, or do you suggest one? I'd really want one that I just hand over the list in Java, but If I must, I can modify the data to comply with JSON format or some other...
有没有这样的API可以满足我的需求？你能指出我正确的方向，还是建议一个？我真的想要一个我只用 Java 提交列表的文件，但是如果必须的话，我可以修改数据以符合 JSON 格式或其他格式...
采纳答案by Matt Handy
There are several component librarys on top of jsf-2.0.
在 jsf-2.0 之上有几个组件库。
Primefacesfor instance has a very powerful datatable componentwith sorting/ filteringoptions. Primefaces is very easy to integrate into your project and comes with a lot of themes(or you can create your own theme).
例如，Primefaces有一个非常强大的数据表组件，带有排序/过滤选项。Primefaces 很容易集成到您的项目中，并带有许多主题（或者您可以创建自己的主题）。
Just have a look at the showcaseand the documentation.
Other popular component libraries are Richfaces(as per comment datatable sorting not supported)and Icefaces.
其他流行的组件库是Richfaces （不支持根据评论数据表排序）和 Icefaces。
回答by Mohamed Mansour
With the native <h:dataTable>you have to do the sorting yourself in your managed bean. You could use existing JSF extension libraries that have them built in such as:
对于本机，<h:dataTable>您必须自己在托管 bean 中进行排序。您可以使用内置的现有 JSF 扩展库，例如：
But if you don't want to use the above toolkits, then in your managed bean, you define your List and sort order (asc or dec). It can be as simple or complex you want.
但是如果您不想使用上述工具包，那么在您的托管 bean 中，您可以定义您的列表和排序顺序（asc 或 dec）。它可以是您想要的简单或复杂。
Change the Orderinglibrary to the SortOrderlibrary, referencing this library: import org.richfaces.component.SortOrder;
将Ordering库更改为库SortOrder，引用此库： import org.richfaces.component.SortOrder;
The sort order comparator can be defined in a variable programmatically using the <rich:column>attribute:
可以使用以下<rich:column>属性以编程方式在变量中定义排序顺序比较器：
private SortOrder sorting = SortOrder.unsorted;
This is an example of using SortOrder programmatically using JSF 2.x/RichFaces 4.x. It uses a three-state sort method: unsorted (default), ascending, and descending, and implemented by setting the sortOrder attribute.
这是使用 JSF 2.x/RichFaces 4.x 以编程方式使用 SortOrder 的示例。它使用三态排序方法：未排序（默认）、升序和降序，并通过设置 sortOrder 属性来实现。
Or the comparator default behavior can be overridden in code, as in this example:
或者可以在代码中覆盖比较器的默认行为，如下例所示：
@ManagedBean(name="somebean")
@SessionScoped
public class OrderBean implements Serializable {
private static final long serialVersionUID = ....;
private List<Item> items;
private boolean sortAscending;
...
}
In your view, you define the which headers you want to sort with, so add a commandLink to make each header clickable.
在您的视图中，您定义了要使用哪些标题进行排序，因此添加一个 commandLink 以使每个标题都可点击。
<h:dataTable value="#{somebean.items}" var="i">
<h:column>
<f:facet name="header">
<h:commandLink action="#{somebean.sort}"> Sort Column</h:commandLink>
</f:facet>
#{i.name}
</h:column>
</h:dataTable>
Now you have to implement the sort for your bean with basic collections, again, it can be as complex as you can:
现在您必须使用基本集合为 bean 实现排序，同样，它可以尽可能复杂：
private final Comparator NAME_SORT_ASC = new Comparator<Item>() {
@Override
public int compare(Item o1, Item o2) {
return o1.getName().compareTo(o2.getName());
}
}
};
private final Comparator NAME_SORT_DESC = new Comparator<Item>() {
@Override
public int compare(Item o1, Item o2) {
return o2.getName().compareTo(o1.getName());
}
}
};
public String sort() {
Collections.sort(items, sortAscending ? NAME_SORT_ASC : NAME_SORT_DESC );
}
You can make your life easier by reusing stuff instead of doing that for each column, I will let you figure that out. You can use better libraries for Java to help you do the comparator for example with Guavafrom Google or Collection Commonsfrom Apache.
您可以通过重用内容而不是为每一列重复使用来使您的生活更轻松，我会让您弄清楚这一点。您可以使用更好的 Java 库来帮助您进行比较，例如使用来自 Google 的Guava或来自 Apache 的Collection Commons。
Instead of doing all that, and reinventing the wheel, use a framework that abstracted all this out for you, they make your life way easier..
与其做所有这些，并重新发明轮子，不如使用一个为您抽象出所有这些的框架，它们让您的生活更轻松。
回答by Vasil Lukach
You can do it in Richfacestoo. Richfaces 3.3.x supports easy sort:
你也可以在Richfaces 中做到这一点。Richfaces 3.3.x 支持简单排序：
<rich:column sortable="true" sortBy="#{res.retailerCode}">
<f:facet name="header">
<h:outputText value="#{msg.retailerId}" />
</f:facet>
<h:outputText value="#{res.retailerCode}" />
</rich:column>
In Richfaces 4.x you can sort datatable using Sorting bean:
在 Richfaces 4.x 中，您可以使用 Sorting bean 对数据表进行排序：
<rich:column id="cardNumber" sortBy="#{res.instNumber}"
sortOrder="#{cardholderSorting.cardNumberOrder}">
<f:facet name="header">
<a4j:commandLink value="#{msg.cardNumber}"
action="#{cardholderSorting.sortByCardNumber}"
render="cardholderTable" />
</f:facet>
<h:outputText value="#{res.cardNumber}" />
</rich:column>
or your DataModel (extends ExtendedDataModel):
或您的 DataModel（扩展 ExtendedDataModel）：
<rich:column id="retailerCode" sortBy="#{rs.retailerCode}" sortOrder="ascending">
<f:facet name="header">
<h:commandLink value="#{msg.retailerId}" style="text-decoration: none; color:black;">
<rich:componentControl target="retailerTable" operation="sort">
<f:param name="column" value="retailerCode" />
<f:param value="" />
<f:param name="reset" value="true" />
</rich:componentControl>
</h:commandLink>
</f:facet>
<h:outputText value="#{rs.retailerCode}" />
</rich:column>
You can add arrows (for sorting order displaying) inside in command link and it will be exact same presentation as in Richfaces 3.3.3.
您可以在命令链接中添加箭头（用于显示排序顺序），它将与 Richfaces 3.3.3 中的演示完全相同。
UPDATE
更新
Starting from RichFaces 4.5 there is support of simple sorting in dataTable (like it was in version 3.3.x).
从 RichFaces 4.5 开始，支持在 dataTable 中进行简单排序（就像在 3.3.x 版中一样）。
