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
Jquery
When I change the name of table for another one name, every records works, but then I don´t have datatable.
html
<div id="test"> <table id="tablex" cellpadding="0" cellspacing="0" border="0" class="display"> <thead> <tr> <th>Cod</th> <th>Name completo</th> <th> </th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John Foster 1</td> <td><img entity_id="1" class="image-selector" src='imagens/grid_cancel.png' title='' /></td> </tr> <tr> <td>2</td> <td>user 0</td> <td><img entity_id="2" class="image-selector" src='imagens/grid_cancel.png' title='' /></td> </tr> <tr> <td>3</td> <td>John Foster xxx</td> <td><img entity_id="3" class="image-selector" src='imagens/grid_cancel.png' title='' /></td> </tr> <tr> <td>4</td> <td>John Foster 4</td> <td><img entity_id="4" class="image-selector" src='imagens/grid_cancel.png' title='' /></td> </tr> <tr> <td>6</td> <td>John Foster 5</td> <td><img entity_id="6" class="image-selector" src='imagens/grid_cancel.png' title='' /></td> </tr> <tr> <td>9</td> <td>John Foster other</td> <td><img entity_id="9" class="image-selector" src='imagens/grid_cancel.png' title='' /></td> </tr> <tr> <td>10</td> <td>John Foster aaa</td> <td><img entity_id="10" class="image-selector" src='imagens/grid_cancel.png' title='' /></td> </tr> <tr> <td>13</td> <td>John Foster yyy</td> <td><img entity_id="13" class="image-selector" src='imagens/grid_cancel.png' title='' /></td> </tr> <tr> <td>15</td> <td>John Foster asds</td> <td><img entity_id="15" class="image-selector" src='imagens/grid_cancel.png' title='' /></td> </tr> <tr> <td>16</td> <td>John Foster ssss</td> <td><img entity_id="10" class="image-selector" src='imagens/grid_cancel.png' title='' /></td> </tr> <tr> <td>18</td> <td>John Foster ssyyy</td> <td><img entity_id="13" class="image-selector" src='imagens/grid_cancel.png' title='' /></td> </tr> <tr> <td>19</td> <td>John Foster oooo</td> <td><img entity_id="15" class="image-selector" src='imagens/grid_cancel.png' title='' /></td> </tr> </tbody> </table> </div>
Jquery
$(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; } });