jQuery Datatables - Tooltipster not working on page 2

Question

I have an issue using the Tooltipster with the jQuery datatable. The tooltip only works on the first page and doesn't work on the subsequent pages.

UPDATE: My js is

$('#tblCurrentEnrollments')
        .on('order.dt', function () {
            $('.demo-interact.tooltipstered').tooltipster('destroy');
            setTimeout(SetToolTipster, 500);
        })
        .on('search.dt', function () {
            $('.demo-interact.tooltipstered').tooltipster('destroy');
            setTimeout(SetToolTipster, 500);
        })
        .on('page.dt', function () {
            $('.demo-interact.tooltipstered').tooltipster('destroy');
            setTimeout(SetToolTipster, 500);
        })
        .on('length.dt', function () {
            $('.demo-interact.tooltipstered').tooltipster('destroy');
            setTimeout(SetToolTipster, 500);
        })

        .dataTable({
            "bAutoWidth": false, // Disable the auto width calculation
            "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
            "aaData": currentEnrollments,
            "aoColumns": [
                {
                    "mData": getToolTip,
                    "sWidth": "30%"
                },
                {
                    "mDataProp": "_Class.class_title",
                    "sWidth": "30%"
                },
                {
                    "mDataProp": "EnrollmentResults.enrollment_results_title",
                    "sWidth": "20%"
                },
                {
                    "mDataProp": "ecommerce_time",
                    "sWidth": "20%"
                }
            ]
        });

function getToolTip(data, type, dataToSet) {
var link = "www.google.com";
var tipDesc = '';

tipDesc = data.Course.course_description;
tipDesc += "<p><a href='" + link + "' target= '_blank'>Click this link</a></p>";
tipDesc += "<p><img src='images/lion.jpg' /></p>"

return '<div class="demo-interact" title="' + tipDesc + '">' + data.Course.course_title + '</div>';
}

The code above is working. I would like to know if this could be shortened or made any more cleaner that what it is right now.

Thanks.

Answer 1

Try this:

$("#tblCurrentEnrollments").DataTable({
        "pageLength": 25,
        "fnDrawCallback": function(){
           // initialize tooltipster here
      }
    });

Answer 2

If you're using dataTable pagination with Tooltipster and your tooltips aren't available in the DOM at the point in which $.fn.tooltipster() is called your subsequent un-initialised tooltips on other dataTable "pages" are not going to work.

Since you've not included the code for Tooltipster here I'm going to make a few assumptions, but an idea would be to call your Tooltipster init function eg something like $('.tooltip').tooltipster() , for each of the dataTable "page" next and previous clicks, and not just in your $(document).ready() (yet another assumption).

Update: (following your updated comment)

In that case, you'll need to utilise a DataTable parameter called fnCreatedCell . This will allow you to modify the DOM element after mRender has made it available, this amended segment of your original DataTable configuration should do the job:

"aoColumns": [{
    "mDataProp": "Course.course_title",
    "sWidth": "30%",
    "mRender": function (data, type, full) {
            // alert(currentEnrollments.length());
            tipDesc = "Test"; //data.course_description;
            tipDesc += "<p><a href='" + link + "' target= '_blank'>Click this link</a></p>";
            tipDesc += "<p><img src='images/lion.jpg' /></p>"

            return '<div class="demo-interact" title="' + tipDesc + '">' + data + '</div>';
        }
    },
    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
        $(".demo-interact", nTd).tooltipster({
            // Your Tooltipster config. here
        });
    },
    {
        "mDataProp": "_Class.class_title",
        "sWidth": "30%"
    },
    {
        "mDataProp": "EnrollmentResults.enrollment_results_title",
        "sWidth": "20%"
    },
    {
        "mDataProp": "ecommerce_time",
        "sWidth": "20%"
    }
]

I hope this helps :)

Answer 3

Use livequery :

 $('.demo-interact').livequery(function () { $(this).tooltipster() }) 

Livequery will apply the tooltipster in all elements with demo-interact class, even if an element is added dynamically.

Answer 4

I had the same problem . That happens because you dont event listener another spread in the pages . I solved with this.

function myFunction(){
     $('yourSelector').on('yourvent',function () {

     });

     $('yourSelector').off('yourvent',function () {

     });
}

You will bind you event for anothers pages with this example.