[RESOLVIDO] - DataTable não seleciona a linha e não aceita paginação

23 de setembro de 2016 7 respostas

Silver_Rob16 23 de setembro de 2016

Olá pessoal, estou utilizando o Jsf 2 SEM Primefaces e gostaria de saber como eu faço pra resolver o seguinte problema:

Minha DataTable está carregando os dados corretamente, mas ela não me permite selecionar a linha que foi carregada dentro dela de jeito nenhum, consta como se ela me bloqueia essa ação. E ela também não reconhece a paginação que eu adicionei(quando minha página carrega, não está exibindo os botões de Anterior, Próximo, etc…) Segue meu Xhtml completo abaixo:

<?xml version="1.0" encoding="UTF-8" ?> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

<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>

<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” />

<h:commandButton value=“Nova Consulta” action="#>…>
{consultarFaixaProdutoBean.novaConsulta}" styleClass=“margem_botoes button” />

</ui:define>
</ui:composition>

Para o projeto que estou fazendo, eu não posso utilizar PrimeFaces e nem Richfaces de maneira nenhuma. Quem souber me responder como eu faço essas ações sem eles eu agradeço.

Até +

7 Respostas

drsmachado 23 de set. de 2016

Só para constar, os atributos
paginator="true"
rows=“15"
paginatorTemplate=”{CurrentPageReport} {FirstPageLink}
{PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
selectionMode=“single"
selection=”#{consultarFaixaProdutoBean.faixaProdutoVO}"
não fazem parte da especificação padrão para a dataTable. Confira aqui: http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/h/dataTable.html
Eles são parte do Primefaces…
Sugestão: implemente paginação real (a que o primefaces utiliza é virtual) e, para disparar os eventos, talvez seja necessário utilizar javascript combinado com o ajax do jsf.

Silver_Rob16 23 de set. de 2016

drsmachado , só pra confirmar , a paginação real que você mencionou seria a que esta nesse tutorial?

http://www.roytuts.com/effective-pagination-example-in-jsf-2/

e referente a seleção, realmente vou ter que aplicar javascript. Encontrei em um outro link aqui e se der certo eu compartilho novamente aqui como ficou.

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

drsmachado 23 de set. de 2016

@Silver_Rob16, isso mesmo. Desta forma você não onera o FacesContext (seja qual for o escopo que utilize) e deixa cada trabalho a cargo do seu responsável adequado.
Javascript e JSF (seja 1.x ou 2.x) não é uma mistura muito homogênea. Eu presto manutenção em um sistema jsf 1.2 com tomahawk e sofro muito com isto.

Silver_Rob16 23 de set. de 2016

Eu criei esse javascript pra resolver o problema, mas sem sucesso, alguém me dê uma sugestão no que estou errando?

$(document).ready(function() {
var table = $(’#faixaProduto’).DataTable();

$('#faixaProduto tbody').on( 'click', 'column', function () {
    if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
    }
    else {
        table.$('column.selected').removeClass('selected');
        $(this).addClass('selected');
    }
} );

} );

drsmachado 23 de set. de 2016

Então, você sabe como o jsf se comporta?
Basicamente, se você define o atributo id do form <h:form id="meuForm">, os ids dos componentes inseridos dentro dele são alterados para algo como: meuForm:idDoComponente.
Assim sendo, se você tem um form com id definido, você não pode usar apenas $('#faixaProduto tbody'), teria que utilizar $('#idDoForm\\:faixaProduto tbody'). As duas barras forçam ao jQuery entender que há a concatenação dos dois pontos.
Por outro lado, sem a definição do atributo id no form, o JSF se encarrega de definir um, que, geralmente, é bem peculiar (algo como jsdfdf9:idDoComponente). Por isso, sugiro que você defina o id do form e altere o javascript.

Silver_Rob16 27 de set. de 2016

Eu alterei o Javascript, mas sem sucesso, adicionei a tag for com id também e não deu certo, segue a alteração que realizei no JavaScript:

$(document).ready(function() {
var table = $(’#content\:tableFaixa’).DataTable();

$('#content\\:tableFaixa tbody').on( 'click', 'tr', function () {
    if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
    }
    else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
} );

} );

Silver_Rob16 14 de out. de 2016

Bom Dia, pra encerrar o tópico, segue minha resolução referente a:

Paginação: encontrei o que eu queria através desse site:
http://www.roytuts.com/effective-pagination-example-in-jsf-2/
era apenas implementá-la através do Java.

Seleção da Linha: Tive que modificar a forma de selecionar, adicionando a tag “input” em meu xhtml conforme abaixo:

<h:column> <input type="radio" class="optionbutton" name="rdbOption" onclick="javascript:salvaProdutoCookie();" value="#{faixaProduto.codProduto}" /> </h:column>

Valeu Gente!!!

Criado 23 de setembro de 2016

Ultima resposta 14 de out. de 2016

Respostas 7

Participantes 2

7 Respostas

Topicos relacionados