Jsf 2 - Datatable does not select the line at the click and does not recognize paging

Asked

Viewed 216 times

2

I’m using the Jsf 2 WITHOUT Primefaces and would like to know how I do to solve the following problem:

My DataTable is loading the data correctly, but it does not allow me to select the line that was loaded into it in any way, it appears as if it blocks me this action. And it also doesn’t recognize the pagination I added (when my page loads, it’s not displaying the Previous, Next, etc...) Follow me Xhtml complete below:

<ui:composition template="/templates/default.xhtml">

    <ui:define name="title">
        <h:outputText value="VPRS-ControleFaixas - Consulta" />
    </ui:define>

    <ui:define name="content">
    <table id="tabela_interna" width="100%" cellpadding="0"
        cellspacing="1">
        <tr>
            <td width="100%" height="100%" colspan="3">
            <h:graphicImage library="imagens" width="70%" name="tit_controle_faixa.gif"/>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
        <td width ="100%" height="100%">
        <h:outputText value="Produto" />
        <h:selectOneMenu style="width : 388px; height : 16px;">
        <f:selectItems value="#{consultarFaixaProdutoBean.listaProduto}" var="produto"
        itemValue="#{produto.codProduto}" itemLabel="#{produto.nomeProduto}"></f:selectItems>
        </h:selectOneMenu>
        </td>
        </tr>

        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>

        <tr>
        <td width ="100%" height="100%" colspan="3">

        <h:dataTable value="#{consultarFaixaProdutoBean.listaFaixa}" var="faixaProduto" 
        paginator="true" rows="15" paginatorTemplate="{CurrentPageReport} >{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        selectionMode="single" selection="# {consultarFaixaProdutoBean.faixaProdutoVO}" rowKey="#{faixaProduto.codProduto}">
        <h:column>
        <f:facet name="header">Produto</f:facet>
        #{faixaProduto.codProduto}-#{faixaProduto.nomeProduto}
        </h:column>
        <h:column>
        <f:facet name="header">Qtd. Propostas</f:facet>
        #{faixaProduto.qtdFaixaPpsta}
        </h:column>
        <h:column>
        <f:facet name="header">Validade (dias)</f:facet>
        #{faixaProduto.numDiasValPpsta}
        </h:column>
        <h:column>
        <f:facet name="header">Desativação (dias)</f:facet>
        #{faixaProduto.numDiasDesatPpsta}
        </h:column>
        <h:column>
        <f:facet name="header">Ultima Atual.</f:facet>
        #{faixaProduto.dtUltAtualizacao}
        </h:column>
        <h:column>
        <f:facet name="header">Responsável</f:facet>
        #{faixaProduto.cdRespUltimaAtualizacao}
        </h:column>
        </h:dataTable>
        </td>
        </tr>
        </table>

        <table id="tabela_botoes" cellspacing="0" cellpadding="0" >border="0" width="30%">
                <tr align="center">
                    <td>
                        <h:commandButton value="Consultar" action="# {consultarFaixaProdutoBean.consultar}" styleClass="margem_botoes button" />
                    </td>
                    <td>
                        <h:commandButton value="Nova Consulta" action="# {consultarFaixaProdutoBean.novaConsulta}" styleClass="margem_botoes button" />
                    </td>
                </tr>
            </table>
        </ui:define>
        </ui:composition>
        </html>

For the project I’m doing, I can’t use PrimeFaces and neither Richfaces not at all. Whoever knows how to answer me how I do these actions without them I thank.

1 answer

0


Follow my two-part solution:

1st - The Line was not selecting by mouse click:

Well, I ended up discovering a form that selects through Javascript, in the following link shows how to do this task and already with the example: https://datatables.net/examples/api/select_single_row.html

2nd - How to make a pagination:

Thanks to the link below, I was able to find the solution to my problem: http://www.roytuts.com/effective-pagination-example-in-jsf-2/

Wanna check how she got? Then I’ll show just below hehe:

1º Create a class called Paginacao, to control all task events, observe the Paginacao class.java:

package br.com.bradseg.vprs.controlefaixas.crud.model.util;

import java.util.ArrayList;
import java.util.List;

import javax.faces.component.UICommand;
import javax.faces.event.ActionEvent;

public class Paginacao {

    private int totalLinha;
    private int primeiraLinha;
    private int totalPaginas;
    private Integer[] paginas;
    private int paginaAtual;
    private List listaTotal;
    private List listaAux;

    public static final int LINHAS_POR_PAGINA = 15;
    public static final int INTERVALO_PAGINAS = 10; 

    public Paginacao(List listaTotal) {
        this.listaTotal = listaTotal;
        carregaPaginacao();
    }

    // Ações da Paginação -----------------------------------------------------------------------------

    public void carregaPaginacao() {

        totalLinha = listaTotal.size();

        // Set paginaAtual, totalPaginas e paginas.
        paginaAtual = (totalLinha / LINHAS_POR_PAGINA) - ((totalLinha - primeiraLinha) / LINHAS_POR_PAGINA) + 1;
        totalPaginas = (totalLinha / LINHAS_POR_PAGINA) + ((totalLinha % LINHAS_POR_PAGINA != 0) ? 1 : 0);
        int tamanhoPaginas = Math.min(INTERVALO_PAGINAS, totalPaginas);
        paginas = new Integer[tamanhoPaginas];

        int primeiraPagina = Math.min(Math.max(0, paginaAtual - (INTERVALO_PAGINAS / 2)), totalPaginas - tamanhoPaginas);

        // Cria as paginas.
        for (int i = 0; i < tamanhoPaginas; i++) {
            paginas[i] = ++ primeiraPagina;
        }
        carregaDataTable();
    }

    public void carregaDataTable(){

        listaAux = new ArrayList<FaixaProdutoVO>();

        int organizador = (paginaAtual * LINHAS_POR_PAGINA) -  LINHAS_POR_PAGINA;
        int limite =  (paginaAtual * LINHAS_POR_PAGINA);
        for(int i = organizador; i<limite; i++){
            if(totalLinha > i){
                Object o = new Object();
                o = listaTotal.get(i); 
                listaAux.add(o);
            } else{
                break;
            }

        }

    }

    public void primeiraPagina() {
        pagina(0);
    }

    public void proximaPagina() {
        pagina(primeiraLinha + LINHAS_POR_PAGINA);

    }

    public void paginaAnterior() {
        pagina(primeiraLinha - LINHAS_POR_PAGINA);
    }

    public void ultimaPagina() {
        pagina(totalLinha - ((totalLinha % LINHAS_POR_PAGINA != 0) ? totalLinha % LINHAS_POR_PAGINA : LINHAS_POR_PAGINA));

    }

    public void pagina(ActionEvent event) {        
        pagina(((Integer) ((UICommand) event.getComponent()).getValue() - 1) * LINHAS_POR_PAGINA);
    }

    private void pagina(int primeiraLinha) {
        this.primeiraLinha = primeiraLinha;
        carregaPaginacao();
    }

    /**
     * @return the totalLinha
     */
     public int getTotalLinha() {
        return totalLinha;
    }

    /**
     * @param totalLinha the totalLinha to set
     */
     public void setTotalLinha(int totalLinha) {
         this.totalLinha = totalLinha;
     }

     /**
      * @return the primeiraLinha
      */
     public int getPrimeiraLinha() {
         return primeiraLinha;
     }

     /**
      * @param primeiraLinha the primeiraLinha to set
      */
     public void setPrimeiraLinha(int primeiraLinha) {
         this.primeiraLinha = primeiraLinha;
     }

     /**
      * @return the totalPaginas
      */
     public int getTotalPaginas() {
         return totalPaginas;
     }

     /**
      * @param totalPaginas the totalPaginas to set
      */
     public void setTotalPaginas(int totalPaginas) {
         this.totalPaginas = totalPaginas;
     }

     /**
      * @return the paginas
      */
     public Integer[] getPaginas() {
         return paginas;
     }

     /**
      * @param paginas the paginas to set
      */
     public void setPaginas(Integer[] paginas) {
         this.paginas = paginas;
     }

     /**
      * @return the paginaAtual
      */
     public int getPaginaAtual() {
         return paginaAtual;
     }

     /**
      * @param paginaAtual the paginaAtual to set
      */
     public void setPaginaAtual(int paginaAtual) {
         this.paginaAtual = paginaAtual;
     }

     /**
      * @return the listaAux
      */
     public List getListaAux() {
         return listaAux;
     }

     /**
      * @param listaAux the listaAux to set
      */
     public void setListaAux(List listaAux) {
         this.listaAux = listaAux;
     }



}

2º in my Managedbean, I created an object of the class Paginacao, as below (Consultrfaixaprodutobean.java):

@Controller
@ManagedBean
@SessionScoped 
public class ConsultarFaixaProdutoBean extends BaseController implements Serializable {

private Paginacao paginacao;

    private FaixaProdutoVO faixaProdutoVO;

    private List<FaixaProdutoVO> listaTotal;
    private List<FaixaProdutoVO> listaFaixa;

@PostConstruct
    public void init(){
        faixaProdutoVO = new FaixaProdutoVO();
        listaTotal = faixaProdutoFacade.obterListaFaixaProduto(faixaProdutoVO);

        if (listaTotal != null && !listaTotal.isEmpty()){
            aplicarPaginacao();
        }
    }

    public void aplicarPaginacao(){
        if(listaFaixa == null){
            paginacao = new Paginacao(listaTotal);
        }else{
            paginacao.carregaPaginacao();
        }

        setListaFaixa((List<FaixaProdutoVO>)paginacao.getListaAux());
    }

//Setters e Getters
}

3º - Finally, follow my Xhtml page, as he calls its properties:

    <?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">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:c="http://java.sun.com/jsp/jstl/core">

    <h:form id="content">
    <ui:composition template="/templates/default.xhtml">

    <ui:define name="content">

    <h:outputScript library="js" name="util.js" />

        <table id="tabela_interna" width="100%" cellpadding="0"
            cellspacing="1">
    <tr>
            <td width ="100%" height="100%" colspan="3"> 
            <h:form>

            <h:dataTable  id="tableFaixa" value="#{consultarFaixaProdutoBean.listaFaixa}" var="faixaProduto" 
            selectionMode="single" selection="#{consultarFaixaProdutoBean.faixaProdutoVO}" rowKey="#{faixaProduto.codProduto}" width ="100%" height="100%">
        <h:column>
         <input type="radio" class="optionbutton" name="rdbOption" onclick="javascript:salvaProdutoCookie();"
                value="#{faixaProduto.codProduto}" />  
        </h:column>

            <h:column>
            <f:facet name="header">Produto</f:facet>
            #{faixaProduto.codProduto}-#{faixaProduto.nomeProduto}
            </h:column>
            <h:column>
            <f:facet name="header">Qtd. Propostas</f:facet>
            #{faixaProduto.qtdFaixaPpsta}
            </h:column>
            <h:column>
            <f:facet name="header">Validade (dias)</f:facet>
            #{faixaProduto.numDiasValPpsta}
            </h:column>
            <h:column>
            <f:facet name="header">Desativação (dias)</f:facet>
            #{faixaProduto.numDiasDesatPpsta}
            </h:column>
            <h:column>
            <f:facet name="header">Ultima Atual.</f:facet>
            #{faixaProduto.dtUltAtualizacao}
            </h:column>
            <h:column>
            <f:facet name="header">Responsável</f:facet>
            #{faixaProduto.cdRespUltimaAtualizacao}
            </h:column>
            </h:dataTable>  
            </h:form>
            <br />
            </td>
            </tr>
            </table>
 <table>
             <tr>
             <td>
             <h:form>
            <!--Botoes de Paginacao-->
            <h:commandLink value="Primeiro" action="#{consultarFaixaProdutoBean.paginacao.primeiraPagina}"
                             disabled="#{consultarFaixaProdutoBean.paginacao.primeiraLinha == 0}" />  <span></span>
            <h:commandLink value="Anterior" action="#{consultarFaixaProdutoBean.paginacao.paginaAnterior}"
                             disabled="#{consultarFaixaProdutoBean.paginacao.primeiraLinha == 0}" /> <span></span>
                  <ui:repeat value="#{consultarFaixaProdutoBean.paginacao.paginas}" var="pagina">
                <h:commandLink value="#{pagina}" actionListener="#{consultarFaixaProdutoBean.paginacao.pagina}"
                               rendered="#{pagina != consultarFaixaProdutoBean.paginacao.paginaAtual}" />
                <h:outputText value="&lt;b&gt;#{pagina}&lt;/b&gt;" escape="false"
                              rendered="#{pagina == consultarFaixaProdutoBean.paginacao.paginaAtual}" />
            </ui:repeat> <span></span>
            <h:commandLink value="Próximo" action="#{consultarFaixaProdutoBean.paginacao.proximaPagina}"
                             disabled="#{consultarFaixaProdutoBean.paginacao.primeiraLinha + 15 >= consultarFaixaProdutoBean.paginacao.totalLinha}" /> <span></span>
            <h:commandLink value="Último" action="#{consultarFaixaProdutoBean.paginacao.ultimaPagina}" 
                             disabled="#{consultarFaixaProdutoBean.paginacao.primeiraLinha + 15 >= consultarFaixaProdutoBean.paginacao.totalLinha}" /> <span></span>
            <h:outputText value="Pagina #{consultarFaixaProdutoBean.paginacao.paginaAtual} / #{consultarFaixaProdutoBean.paginacao.totalPaginas}" /> 
            <br />


            </h:form>
            </td>
            </tr>
             </table>

            </ui:define>

    </ui:composition>
    </h:form>
    </html>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.