Issue with pagination and jQuery functionality

blfrench

I'm seeing an issue with dataTables that I'm hoping is a fairly easy fix.

I have a table with a column of radio selects. When the radio button is checked, an expiration date field is enabled and a datepicker is intitialized for the end user to select a new date.

If another radio button is selected, the datepicker is destroyed and the field is hidden again.

This works fine with dataTables as long as I don't have pagination enabled. Once I do, the first 10 rows working as normal, but anything after that has two problems:
1) the fields aren't hidden,
2) the radio buttons don't register clicks in the $('input:radio').change() portion of my jquery code.

I'm pretty sure it's because only the first 10 rows are present when the $(document).ready() function is executed on page load and when I click to the next page the new rows don't get picked up.

So my question: Is there a way for dataTables to invoke some of the functionality, or somehow register the new html with jQuery?

I'm not a jQuery expert but some pointers would be appreciated.

alexkbecker

Hi everybody!!

I have the same issue, only 10 first records play datepicker or click in any button!!

alexkbecker

Hi blFrench,

I found a solution that works for me in the post http://datatables.net/forums/discussion/1723/editable-with-datepicker-inside-datatables/p1,
try as follows:

[code]
$yourTable=$('#yourTable').dataTable( {
"fnDrawCallback":function(){ $('.showCalendar').datepicker()}
});
[/code]


my code:
[code]
$('#tbConteudo').dataTable({
"sDom": '<"top"iflp<"clear">>rt',
"aoColumnDefs": [{ "bSearchable": false, "aTargets": [3]}],
"fnDrawCallback": function () {
$('.cDatas').datepicker({}),
$('.botaoAtualizar').click(function () {
var toRemove = 'btnAtualizar_';
var codBu = this.name.replace(toRemove, '');
fInserirBu(codBu);
}),
$('.botaoRemover').click(function () {
var box = confirm('Deseja Excluir?')
if (box == true) {
var toRemove = 'btnRemover_';
var codBu = this.name.replace(toRemove, '');
fRemoverBu(codBu);
} else {
return false;
}
})
}
});
[/code]

blfrench

Alex,

It's been awhile but I just wanted to post and let you know that your example helped me greatly. I was able to implement solution to my issue pretty easily using the fnDrawCallback function and putting all my jQuery items in a method that is called whenever the table updates.

Thanks again!