Datatable + jquery + link img

Front-end
#1

eu tenho o seguinte :

html

                    <table id="tabela" cellpadding="0" cellspacing="0" border="0" class="display">
                        <thead>
                            <tr>
                                <th>Código</th>
                                <th>Nome completo</th>
                                <th>nome login</th>
                                <th>Email</th>
                                <th>&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                                <tr>
                                    <td>1</td>
                                    <td>Joao da Silva</td>
                                    <td>Joao</td>                                    
                                    <td>joao@uol.com.br</td>
                                    <td><img entity_id="1" class="image-selector" src='imagens/grid_cancel.png' title=''  /></td>
                                </tr>
                                .........

                                <tr>
                                    <td>1</td>
                                    <td>Jose da Silva</td>
                                    <td>Jose</td>                                    
                                    <td>jose@uol.com.br</td>
                                    <td><img entity_id="11" class="image-selector" src='imagens/grid_cancel.png' title=''  /></td>
                                </tr>

                        </tbody>
                    </table>

Jquery

    $("img.image-selector").click(function () {
        idCancelar = $(this).attr("entity_id");
        $("#confirmaExclusao").html("Deseja excluir o registro  " + idCancelar + " ?");
        $("#confirmaExclusao" ).dialog( "open" );
    });

Como estou usando datatables, e está paginando, até o 10 registro, se eu clicar no link (imagem), ele passa pelo procedimento sem problemas, mas, a partir do 11, que está na outra pagina, não entra mais. Eu tirei do datatable, renomeei o id da table, e o link funciona legal, mas quando volto para o datatable, para de funcionar.

Alguém conhece datatable

#2

Alguém conhece datatable pra dar um help ?

#3

Poderia me explicar o seu problema melhor.
Não entende essa questão de a partir do 11 e essa imagem se refere a qual ?

#4

vc ja usou datatable ? ele pagina certo ? se eu tenho 20 registros, eu so visualizo 10 e os outros 10 aparecem na outra página.

até o 10º registro, o link funciona normalmente. a partir do 11º, nenhum outro funciona.

Para testar, já tirei mudei o id da table, e dai o link funciona em qq registro. O problema está, aparentemente, na paginação do datatable. Ou eu fiz o código jquery errado.

#5

Já usei sim.
Coloque o código do datatable para eu ver.

E coloque entre as tags

#6 
$(function() {
    oTable = $('#tabela').dataTable({
		"bJQueryUI": true,
		"sPaginationType": "full_numbers",
                "bAutoWidth": false,
                "aoColumns": [{"sWidth":"5%"},{"sWidth":"30%"},{"sWidth":"30%"},{"sWidth":"30%"},{"sWidth":"5%"}]
            });

    $("#tabela tbody").click(function(event) {
        $(oTable.fnSettings().aoData).each(function (){
            $(this.nTr).removeClass('row_selected');
	});
	$(event.target.parentNode).addClass('row_selected');
    });

    $("img.image-selector").click(function () {
        idCancelar = $(this).attr("entity_id");
        $("#confirmaExclusao").html("Deseja excluir o registro  " + idCancelar + " ?");
        $("#confirmaExclusao" ).dialog( "open" );
    });
});
#7

O erro é na paginação ?
Os 10 primeiros que você diz são os números de páginas que aparecem inicialmente ?

#8

eu tenho 20 registros certo ? a primeira pagina vem 10 certo ? nesses 10 primeiros o link funciona, nos 10 seguintes, página 2, os links não funcionam.

#9

Chegou a executar o firebug para ver se dá algum erro javascript ?

#10

Não da erro de javascript. Nesses registros que não funciona, nem chega no javascript, os 10 primeiros sim, fazem o processo normalmente

#11

Estranho.
Quando usei não usava paginação com números e sim com aquele select que diz quantos registros você deseja.

#12

Obrigado lele_vader pelas respostas.

#13

Eu vi o exemplo do site e lá era o mesmo código básico que o seu.
A sua paginação é lazy ou normal em memória ?

#14

Q. My events don’t work on the second page (events in general)
A. When attaching events to cells in a table controlled by DataTables, you need to be careful how it is done. Because DataTables removes nodes from the DOM, event’s might not be applied. To over come this, is quite simple, as shown in these examples: pre-initialisation, post-initialisation. $().live() events can also help. Finally you use my Visual Event bookmarklet to help debug event issues.

Então o código :

  $("img.image-selector").click(function () {  
        idCancelar = $(this).attr("entity_id");  
        $("#confirmaExclusao").html("Deseja excluir o registro  " + idCancelar + " ?");  
        $("#confirmaExclusao" ).dialog( "open" );  
    });

foi substituido por

$("#tabela tbody").on("click", "td", function(event){
    alert($(this).index());
    alert($(this).siblings("td:first").text());
});
#15

Acho q ficou muito ruim assim :?

No meu caso, eu tenho um link em cada linha do DataTable…
Se por “acidente” o usuário clicar na coluna(TD) ou linha(TR), terei que ficar fazendo IF para verificar se ele clicou no link ou se clicou em algum lugar da tela.

Mais fácil e legível colocar um onclick direto no Href chamando a minha function e retirar o *.click(function) do Jquery.

#16