image on datatable doesn´t work the other page

lmonqueiro

I try to use img on datatable. It´s work only the 10 first records, but the records there are the second or the next pages didn´t work out.

When I change the name of table for another one name, every records works, but then I don´t have datatable.

html
[code]





Cod
Name completo
 





1
John Foster 1




2
user 0




3
John Foster xxx




4
John Foster 4




6
John Foster 5




9
John Foster other




10
John Foster aaa




13
John Foster yyy




15
John Foster asds




16
John Foster ssss




18
John Foster ssyyy




19
John Foster oooo







[/code]

Jquery
[code]
$(function() {


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

$("#tablex 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 () {
idCancel = $(this).attr("entity_id");
$("#confirmdelete").html("Are you sure to delete this record " + idCancel + " ?");
$("#confirmdelete" ).dialog( "open" );
});

$( "#confirmdelete" ).dialog({
autoOpen: false,
resizable: false,
show: "blind",
height:200,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
goDelete(idCancel);
},
"No": function() {
$( this ).dialog( "close" );
}
}
});

function goDelete(idDelete) {
principal.action = principal.action + 'userDelete/'+idDelete;
principal.submit();
}

$('#message').click(
function(){
$(this).slideUp('fast');
}
);

if ($('#message').text().trim() == '') {
$('#message').slideUp('fast');
}

$( "#alert" ).dialog({
autoOpen: false,
show: "blind",
hide: "blind",
width: 'auto',
modal: true
});

if ($('#alert').text().trim() != '') {
$( "#alert" ).dialog( "open" );
return false;
}

});

[/code]

allan

http://datatables.net/faqs#events

lmonqueiro

Thank´s allan, It´s my first project about datatables, I undestand my code is wrong, but how can I know the cell was clicked ?

allan

Did you read the FAQ? The problem is with the event handler:

[code]
$("img.image-selector").click(function
[/code]

it is only applied to the first page.

Allan

lmonqueiro

Yeah, I read and I read the examples, but I don´t know how I have to code to know if the user clicked on the image.

allan

Well you've got it work for the first page yes?

So you need to change the event handler to be a 'live' event handler which will work on all pages, as the FAQ suggests. See the jQuery documentation: http://api.jquery.com/on/

Allan

lmonqueiro

I read your suggestion and I tried this codes :

1
[code]
$("#tablex tbody tr").on("click", "td", function(event){
alert($(this).text());
});
[/code]

2
[code]
$("#tablex tbody").on("click", "tr", function(event){
alert($(this).text());
});
[/code]

The first I had the same problem with the second page.

The second wotk out. But I need two things : First to know each column was clicked. I need to code only if the image column was clicked, and the second, I need the value of id, or I get the first column or the entity_id value.

Thank´s your help.

allan

Use:

[code]
$("#tablex tbody").on("click", "td", function(event){
alert($(this).text());
});
[/code]

lmonqueiro

Thank´s a lot. Could you help me to close this code please ? Now I need to know each column was clicked and I need to get a value

[code]

15
John Foster asds


[/code]

allan

You already know which column was clicked do you not? The `td` that was clicked on is `this` .

Allan

lmonqueiro

I may not know enough jquery ('m beginning). I need to make sure that the user clicked on the image or the third column, and must have the code, the first column, to make the deletion procedure.

lmonqueiro

Finally

[code]
$("#tablex tbody").on("click", "td", function(event){
alert($(this).index());
alert($(this).siblings("td:first").text());
});
[/code]

Thank´s a lot Allan