Search code examples
jquerypaginationdatatablesraty

How to call javascript on pagination and record select of Datatables?


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.


Solution

  • 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
            });
        }
    });