DataTable不会在单击中选择该行，并且无法识别分页

Question

I am using the Jsf 2 without Primefaces and would like to learn 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 has been loaded into it at all, appears as if it blocks me this action. And it also does not recognize the paging I added (when my page loads, is not displaying the Previous, Next, etc ...) Follow my complete Xhtml 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 not use PrimeFaces nor Richfaces in any way. Those who know me answer how I do these actions without them I appreciate it.

Answer 1

Do you have your JSF Component,action and event wrapped in ah:form tag? Please add h:form tag in your page and it should work for you I guess.

Answer 2

Here's my solution in two parts:

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

Well, I discovered a way that selects through JavaScript, the following link shows how to do this task and already the example:

https://datatables.net/examples/api/select_single_row.html

2nd - How to make a pagination:

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

They want to check how it was? Then I show just below hehe:

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

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, created an object pagination class, as follows (ConsultarFaixaProdutoBean.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, following my Xhtml page, as it 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>