jQuery数据表-工具提示在第2页上不起作用

Question

我在将Tooltipster与jQuery数据表一起使用时遇到问题。 工具提示仅在第一页上起作用，而在随后的页面上不起作用。

更新：我的js是

$('#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>';
}

上面的代码正在工作。 我想知道这是否可以缩短或变得比目前更清洁。

谢谢。

Answer 1

尝试这个：

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

Answer 2

如果您使用带有Tooltipster的dataTable分页，并且在$.fn.tooltipster()被调用时，您的工具提示在DOM中不可用，则其他dataTable“页面”上的后续未初始化工具提示将无法正常工作。

由于您尚未在此处包含Tooltipster的代码，因此我将作一些假设，但是一个想法是为每个$('.tooltip').tooltipster()调用Tooltipster初始化函数，例如$('.tooltip').tooltipster()类的东西$('.tooltip').tooltipster() dataTable“页面”的下一次和上一次点击，而不仅仅是在$(document).ready() （还有另一个假设）。

更新：（跟随您的更新评论）

在这种情况下，您将需要使用一个名为fnCreatedCell的DataTable参数。 这将允许您在mRender使它可用之后修改DOM元素，原始DataTable配置的此修改后的段应该可以完成此工作：

"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%"
    }
]

我希望这有帮助 ：）

Answer 3

使用livequery ：

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

即使某个元素是动态添加的，Livequery也会将其tooltipster应用于具有demo-interact类的所有元素。

Answer 4

我有同样的问题 。 发生这种情况是因为您没有在页面中另外传播事件监听器。 我解决了。

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

     });

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

     });
}

通过此示例，您将为其他页面绑定事件。