Jsf 2 - DataTable does not select the row in the click and does not recognize pagination

Follow my solution in two parts:

1st - Line was not selecting by mouse click:

Well, I ended up finding a form that selects through JavaScript, the following link shows how to do this task and already with the example:

2nd - How to make a pagination:

Thanks to the link below, I was able to find the solution to my problem: link

Want to check out how she got? Then I'll show below hehe:

1 Create a class called Pagination, to control all the events of the task, 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;
     }



}

2nd in my ManagedBean, I created an object of class Pagination, as below (ConsultProductBean.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
}

3rd - Finally, follow 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>