简体   繁体   English

Primefaces:DataTable在排序时再现数据

[英]Primefaces: DataTable reproducing data on sorting

I got a problem with the Primefaces DataTable. 我遇到了Primefaces DataTable问题。 I want to build an Complex Datatable with Filtering and Sorting. 我想用过滤和排序建立一个复杂的数据表。 I really new to Primefaces so I studied the Examples on Primefaces Showcase. 我对Primefaces真的很陌生,所以我研究了Primefaces Showcase上的示例。

If you click the first time on the sorting button, the whole list is reproduced and got sorted. 如果您第一次单击排序按钮,则会复制整个列表并进行排序。 On the second click it sorts normally. 在第二次单击它正常排序。

The output looks like: 输出如下:

Initial: List has 3 Items. 初始:列表具有3个项目。 1st Click: List has 6 Items and is sorted ASC 2nd Click: List has 6 Items and is sorted DES 第一次点击:列表包含6个项目,并按ASC排序第一次点击:列表包含6个项目,并按DES排序

I'm confused and can't find the mistake. 我很困惑,找不到错误。 Please help me with this. 请帮我解决一下这个。

Note: I'm using Primefaces 3.4 and JSF 2.1 on Apache Tomcat 7.x 注意:我在Apache Tomcat 7.x上使用Primefaces 3.4和JSF 2.1

Dashboard.xhtml Dashboard.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition 
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">

<h:form id="frm_dashboard">

    <p:growl autoUpdate="true" showDetail="true" />

    <p:dataTable var="AntragsDatenObj" value="#{dashboardController.obj_offAntraege}" rowKey="#{AntragsDatenObj.antr_id}" paginator="false" rows="20"  
                 selection="#{dashboardController.selektierterAntrag}" selectionMode="single" id="dt_AntragsDatenObj" style="font-size: 12px; width: 96%">  

        <p: ajax event="rowSelect" update=":frm_dashboard:display" oncomplete="Dialog.show()" />  

        <f:facet name="header">  
            Liste von Anträgen  
        </f:facet>  

        <p:column headerText="ID" sortBy="#{AntragsDatenObj.antr_id}" id="dt_antr_id" style="font-size: 12px;">  
            #{AntragsDatenObj.antr_id}  
        </p:column>  

        <p:column headerText="Start" sortBy="#{AntragsDatenObj.urlb_startdatum}" id="dt_urlb_startdatum" style="font-size: 12px;">  
            #{AntragsDatenObj.urlb_startdatum}  
        </p:column>  

        <p:column headerText="Ende" sortBy="#{AntragsDatenObj.urlb_enddatum}" id="dt_urlb_enddatum" style="font-size: 12px;">  
            #{AntragsDatenObj.urlb_enddatum}  
        </p:column>  

        <p:column headerText="Länge" sortBy="#{AntragsDatenObj.urlb_laenge}" id="dt_urlb_laenge" style="font-size: 12px;">  
            #{AntragsDatenObj.urlb_laenge}  
        </p:column>

        <p:column headerText="Benutzer" sortBy="#{AntragsDatenObj.user_name}" id="dt_user_name" style="font-size: 12px;">  
            #{AntragsDatenObj.user_name}  
        </p:column>

    </p:dataTable>

<p:dialog header="Details" widgetVar="Dialog" resizable="false"  
           width="200" showEffect="explode" hideEffect="explode">  

     <h:panelGrid id="display" columns="2" cellpadding="4">  

         <f:facet name="header">  
             Details
         </f:facet>  

         <h:outputText value="ID:" />  
         <h:outputText value="#{dashboard.selektierterAntrag.antr_id}" id="antr_id"/>  

         <h:outputText value="Startdatum:" />  
         <h:outputText value="#{dashboard.selektierterAntrag.urlb_startdatum}" id="urlb_startdatum"/>  

         <h:outputText value="Enddatum:" />  
         <h:outputText value="#{dashboard.selektierterAntrag.urlb_enddatum}" id="urlb_enddatum"/>  

         <h:outputText value="Länge:" />  
         <h:outputText value="#{dashboard.selektierterAntrag.urlb_laenge}" id="urlb_laenge"/>  
     </h:panelGrid>  
 </p:dialog>  

</h:form>  

MangedBean called DashboardController.java package lean.controller; MangedBean称为DashboardController.java包lean.controller;

import java.util.List;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
import lean.dataobjects.AntragsDatenObj;


@ViewScoped
@ManagedBean
public class DashboardController {

    private List<AntragsDatenObj> obj_offAntraege;

    private AntragsDatenObj selektierterAntrag;

    public List<AntragsDatenObj> getObj_offAntraege() {
        return obj_offAntraege;
    }

    public AntragsDatenObj getSelektierterAntrag() {
        return selektierterAntrag;
    }

    public void setSelektierterAntrag(AntragsDatenObj selektierterAntrag) {
        this.selektierterAntrag = selektierterAntrag;
    }

    public DashboardController() {

        try{

            this.obj_offAntraege = lean.sql.QueryLibrary.getOffneAntraegeMitDaten();

        } catch (Exception e){

            FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR,"#DashBoard001 KOMPONENTE: getoffneAntraege ist abgestürzt: ",e.getMessage()));

        }

    }

}

DataObject AntragsDatenObj.java package lean.dataobjects; DataObject AntragsDatenObj.java包lean.dataobjects;

import java.util.Date;


public class AntragsDatenObj {

    private int antr_id;
    private int antr_status;
    private Date urlb_startdatum;
    private Date urlb_enddatum;
    private int urlb_laenge;
    private String user_name;

    public AntragsDatenObj(int antr_id, int antr_status, Date urlb_startdatum, Date urlb_enddatum, int urlb_laenge, String user_name) {
        this.antr_id = antr_id;
        this.antr_status = antr_status;
        this.urlb_startdatum = urlb_startdatum;
        this.urlb_enddatum = urlb_enddatum;
        this.urlb_laenge = urlb_laenge;
        this.user_name = user_name;
    }

    public int getAntr_id() {
        return antr_id;
    }

    public int getAntr_status() {
        return antr_status;
    }

    public Date getUrlb_startdatum() {
        return urlb_startdatum;
    }

    public Date getUrlb_enddatum() {
        return urlb_enddatum;
    }

    public int getUrlb_laenge() {
        return urlb_laenge;
    }

    public String getUser_name() {
        return user_name;
    }

}

I apologize for my English. 我为我的英语道歉。

There is problem in datatable.js line 108 datatable.js第108行有问题

sortorder = columnHeader.data('sortorder');

if(sortorder) {
    if(sortorder === 'DESCENDING')
        _self.sort(columnHeader, 'ASCENDING');
    else if(sortorder === 'ASCENDING')
        _self.sort(columnHeader, 'DESCENDING');
}
else {
    _self.sort(columnHeader, 'ASCENDING');
}

Initially columnHeader.data('sortorder') is empty even if there is selected sorted column. 最初,即使选择了已排序的列,columnHeader.data('sortorder')还是空的。

Fix: on ajax success, for example 修复:例如,关于ajax成功

$('body').ajaxSuccess(...);

do

function() {
    $('.ui-datatable .ui-sortable-column.ui-state-active').each(function() {
        column = $(this);

        if (!column.data('sortorder')) {
            if (column.find('.ui-icon-triangle-1-n')) {
                column.data('sortorder', 'ASCENDING');
            } else if (column.find('.ui-icon-triangle-1-s')) {
                column.data('sortorder', 'DESCENDING');
            }
        }
    });
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM