CODEWITHSUNDEEP
jsfprimefacesdatatablereset
Apoorv Kansal
Apoorv Kansal

Reputation: 3290

Primefaces datatable Reset and Reload data

I am not sure how to reset the primefaces datatable and then reload data into it.

Any ideas?

enter image description here

As soon as I click "Teacher" or "House Leadership Team", i send a ajax call and then I would like to completely reset the datatable and then reload data.

Here are the parts relating to the two panels:

#{msgs.typeOfLeaderPunishment}
<f:ajax event="valueChange" listener="#{detentionForm.updateData()}" execute="typeOfLeader" render="typeOfPunishment studentTable">
    <p:selectOneMenu id="typeOfLeader" value="#{detentionForm.typeOfLeaderSelectedID}" style="width:400px" panelStyle="width:150px" effect="fade">
       <f:selectItems value="#{detentionForm.teacherTypes}" var="type" itemLabel="#{type.label}" itemValue="#{type.value}" />
    </p:selectOneMenu>
</f:ajax>

This part relates to choosing "House Leadership Team" or "Teacher" which will then trigger a ajax call updating the datatable.

<p:dataTable id="studentTable" var="student" value="#{detentionForm.students}" paginator="true" rows="10" selection="#{detentionForm.studentSelected}" filterDelay="200" filteredValue="#{detentionForm.filteredStudents}" binding="#{detentionForm.studentTable}">  
      <f:facet name="header">  
           Students:   
      </f:facet>  
                    <p:column id="prefName" headerText="Preferred Name" sortBy="=#{student.prefName}" filterBy="#{student.prefName}" filterMatchMode="contains">  
                        #{student.prefName} 

                    </p:column>  
                    <p:column id="lastName" headerText="Last Name" sortBy="#{student.lastName}" filterBy="#{student.lastName}" filterMatchMode="contains">
                        #{student.lastName}
                    </p:column>
                    <p:column id="house" headerText="House" sortBy="#{student.house}">
                        #{student.house}
                    </p:column>
                    <p:column id="code" headerText="Student Code" sortBy="#{student.studentCode}" >
                        #{student.studentCode}
                    </p:column>
                    <p:column id="gender" headerText="Gender" sortBy="#{student.gender}">
                        #{student.gender}
                    </p:column>
                    <p:column id="formName" headerText="Form" sortBy="#{student.form}">
                        #{student.form}
                    </p:column>
                    <p:column id="yearLevel" headerText="Year Level" sortBy="#{student.yearLevel}">
                        #{student.yearLevel}
                    </p:column>
                </p:dataTable>

This part is the datatable.

//ajax method called when user clicks on "House Leadership Team" or "Teacher" int the selectOneMenu tag
    public void updateData(){
        this.findStudents();


    }



    //populates the student list with student codes depending on what ledership was chosen (eg. HouseLeader -> import House students only)
    private void findStudents() {
        this.students.removeAll(this.students);
        int houseID =  this.findTeacherHouseID();
        PreparedStatement ps;
        Connection con;
        String sqlStudentsTeacher = "SELECT a.LastName, a.PrefName, a.Code, a.Gender, b.FormName, b.YearLevel, c.HouseName FROM detentioncentredb.tbl_students a, detentioncentredb.tbl_forms b, detentioncentredb.tbl_houses c WHERE a.Form = b.Id AND a.House = c.Id";
        String sqlStudentsHouseLeader = "SELECT a.LastName, a.PrefName, a.Code, a.Gender, b.FormName, b.YearLevel, c.HouseName FROM detentioncentredb.tbl_students a, detentioncentredb.tbl_forms b, detentioncentredb.tbl_houses c WHERE a.Form = b.Id AND a.House = c.Id AND a.House = ?";
        ResultSet rs;
        try {
            con = ds.getConnection();
            if(this.typeOfLeaderSelectedID == 1){
                ps = con.prepareStatement(sqlStudentsTeacher);
            }else{ //typeOfLeaderSelectedID must equal 2. >>>>>>>>>>>Make sure that makeDetention xhtml page has a specific filter and there must be a validator when the user selects a leadership ty.pe
                ps = con.prepareStatement(sqlStudentsHouseLeader);
                ps.setInt(1,houseID);
            }
            rs = ps.executeQuery();
            //Puts a row into a Student object and chucks into the student arraylist
            while(rs.next()){
                Student s = new Student();
                s.setForm(rs.getString("FormName"));
                s.setGender(rs.getString("Gender"));
                s.setHouse(rs.getString("HouseName"));
                s.setLastName(rs.getString("LastName"));
                s.setPrefName(rs.getString("PrefName"));
                s.setStudentCode(rs.getString("Code"));
                s.setYearLevel(rs.getString("YearLevel"));
                this.students.add(s);
            }
            rs.close();
            ps.close();
            con.close();
        } catch (SQLException ex) {
            Logger.getLogger(DetentionFormBean.class.getName()).log(Level.SEVERE, null, ex);
        }

    }


    private int findTeacherHouseID(){
        PreparedStatement ps;
        Connection con;
        String sqlTeacherHouseID = "SELECT House FROM detentioncentredb.tbl_teachers WHERE RegNumber = ?";
        ResultSet rs;
        int id = 0;
        try {
            con = ds.getConnection();
            ps = con.prepareStatement(sqlTeacherHouseID);
            ps.setInt(1, this.details.getUserName());
            rs = ps.executeQuery();
            while(rs.next()){
                id = rs.getInt("House");
            }
            rs.close();
            ps.close();
            con.close();
        } catch (SQLException ex) {
            Logger.getLogger(DetentionFormBean.class.getName()).log(Level.SEVERE, null, ex);
        }

        return id;
    }

This part is apart of the back bean showing the ajax method called and what is done with that method. I don't know what to put into the ajax method to reset the database and then load data back into the datatable.

Upvotes: 5

Views: 56169

Answers (4)

Heather92065
Heather92065

Reputation: 7923

I've had success by invoking the dataTable's AJAX/jQuery filter() function using the PrimeFaces remoteCommand: 

<p:selectOneMenu id="typeOfLeader" value="#{detentionForm.typeOfLeaderSelectedID}"
             style="width:400px" panelStyle="width:150px" effect="fade"
             onchange="typeOfLeaderUpdate();">

<f:selectItems value="#{detentionForm.teacherTypes}" var="type" itemLabel="#{type.label}" itemValue="#{type.value}" />
<p:ajax event="change" oncomplete="typeOfLeaderUpdate();"/>

<p:remoteCommand id="typeOfLeaderRemoteCommandId" name="typeOfLeaderUpdate"
                 actionListener="#{detentionForm.updateData()}"
                 update="studentTable"
                 oncomplete="student.filter();"/>

Upvotes: 0

Lukman Munaji
Lukman Munaji

Reputation: 51

I have same issue with primefaces 4 datatable.

  1. I have changed j2ee version from j2ee6 to j2ee7.
  2. I've changed glassfish server from 3.1.2 final with gf 4
  3. I've changed jsf version from 2.2 to 2.2.4 and nothing changed (still not refreshing)

Thanks to Mehul Kaklotar I've rebuild/call getList() after i create/edit/delete database and my datatable refreshed.

Note: add update=":yourform:yourdatatable" on <p:commandbutton>

Upvotes: 0

Mehul Kaklotar
Mehul Kaklotar

Reputation: 375

whenever you are changing the select one menu with ajax, You are calling updateData method. Try to rebuild the list 'students' which you are displaying on updateData method.

Upvotes: 0

Serkan Arıkuşu
Serkan Arıkuşu

Reputation: 5619

The problem is that although you are calling your managed bean method, you are not telling the jsf datatable to "update" its contents.

This should help

<p:selectOneMenu id="typeOfLeader" value="#{detentionForm.typeOfLeaderSelectedID}">
    <f:selectItems value="#{detentionForm.teacherTypes}" var="type" itemLabel="#{type.label}" itemValue="#{type.value}" />
    <p:ajax event="change" update="studentTable" listener="#{detentionForm.updateData()}" />
</p:selectOneMenu>

The important part here is update="studentTable" which tells that after completing the ajax request, update the jsf component with id studentTable.

PS1: This assumest that your selectOneMenu and datatable are in the same form; if not you should replace update="studentTable" with the correct path. PS2: I kindly suggest you reading about DAO layers so that you can remove your findStudents method from your managed bean.

Upvotes: 8

Related Questions