I'm using Datatables to show data in tabular form. I'm using jQuery Raty library to show 5 stars in a column.
The problem is: on the first page, the Raty library works (as the DOM element is present), but when I paginate, sort or select page size in Datatables, new records come into the picture which were not there previously & Raty is not implicitly working.
I need to call Raty again on pagination, sort etc. How can I do that? Is there a better way to solve this issue?
Please help & guide.
EDIT:
This is my datatable init:
$('#mydatatable').dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
}
});
While the Raty lib init is as follows:
$('.star').raty({
readOnly: true,
score: 3.26
});
In the HTML markup, the raty column looks like:
<td><div class="star" ></div></td>
where is just another column in Datatables.
Could try the fnDrawCallback in datatables? See it in use here: http://live.datatables.net/#preview
Although, that occurs on every keyup during search, which could make your app slower.
i.e.
$('#mydatatable').dataTable({
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"fnDrawCallback": function (oSettings) {
// I would suggest adding some code here to conditionally check if it hasn't already
// been initialised on a particular .star element
$('.star').raty({
readOnly: true,
score: 3.26
});
}
});