Javascript jQuery Datatables-Tooltipster在第2页不起作用

我在jQuery数据表中使用Tooltipster时遇到问题。工具提示仅适用于第一页，不适用于后续页面

更新： 我的js是

$（'tblcurrentenrolls'）
.on（'order.dt'，函数（）{
$（'.demo interact.tooltipster'）.tooltipster（'destroy'）；
setTimeout（SetToolTipster，500）；
})
.on（'search.dt'，函数（）{
$（'.demo interact.tooltipster'）.tooltipster（'destroy'）；
setTimeout（SetToolTipster，500）；
})
.on（'page.dt'，函数（）{
$（'.demo interact.tooltipster'）.tooltipster（'destroy'）；
setTimeout（SetToolTipster，500）；
})
.on（'length.dt'，函数（）{
$（'.demo interact.tooltipster'）.tooltipster（'destroy'）；
setTimeout（SetToolTipster，500）；
})
.数据表({
“bAutoWidth”：false，//禁用自动宽度计算
“长度菜单”：[[5,10,25,50，-1]，[5,10,25,50，“全部”]，
“aaData”：当前注册，
“aoColumns”：[
{
“mData”：getToolTip，
“瑞士”：“30%”
},
{
“mDataProp”：“\u Class.Class\u title”，
“瑞士”：“30%”
},
{
“mDataProp”：“EnrollmentResults.enrollment\u results\u title”，
“瑞士”：“20%”
},
{
“mDataProp”：“电子商务时间”，
“瑞士”：“20%”
}
]
});
函数getToolTip（数据、类型、dataToSet）{
var link=“www.google.com”；
var tipDesc=''；
tipDesc=data.Course.Course\u说明；
tipDesc+=“
”；
tipDesc+=“
”
返回“”+data.Course.Course\u title+“”；
}

上面的代码正在运行。我想知道，这是否可以缩短或使它比现在更干净

---

谢谢。

如果您在Tooltipster中使用dataTable分页，并且在调用

$.fn.Tooltipster（）

时，DOM中没有可用的工具提示，则其他dataTable“页面”上后续未初始化的工具提示将无法工作

由于您没有在这里包含Tooltipster的代码，我将做一些假设，但是一个想法是调用Tooltipster init函数，例如，对于下一次和上一次单击的每个数据表“页面”，而不仅仅是在

$（document）.ready（）

中调用类似

$（'.tooltip'）.Tooltipster（）

（另一个假设）

更新：（根据您的最新评论） 在这种情况下，您需要使用名为

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

“aoColumns”：[{
“mDataProp”：“课程.课程名称”，
“瑞士”：“30%”，
“mRender”：功能（数据、类型、完整）{
//警报（currentEnrollments.length（））；
tipDesc=“Test”//data.course\u说明；
tipDesc+=“
”；
tipDesc+=“
”
返回“”+数据+“”；
}
},
“fnCreatedCell”：功能（nTd、sData、oData、iRow、iCol）{
$（“.demo-interact”，nTd）.tooltipster({
//您的Tooltipster config.here
});
},
{
“mDataProp”：“\u Class.Class\u title”，
“瑞士”：“30%”
},
{
“mDataProp”：“EnrollmentResults.enrollment\u results\u title”，
“瑞士”：“20%”
},
{
“mDataProp”：“电子商务时间”，
“瑞士”：“20%”
}
]

我希望这有帮助：）

使用：

---

Livequery将在使用

demo interact

类的所有元素中应用

tooltipster

，即使动态添加了元素。

我也遇到了同样的问题。发生这种情况是因为你没有在页面中找到另一个排列。我解决了这个问题

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

     });

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

     });
}

您将使用此示例为其他页面绑定事件。

尝试以下操作：

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

---

在应用

tooltipster

的地方，工具提示需要一个带有类demo interact的div标记。如果您看到上面的代码，我已经使用了mRender并将该单元格的内容包装在该类的div标记中。如果您看到上面的代码，我已经使用mRender并将该单元格的内容包装在该类的div标记中。@DevilsGrave谢谢，我已经更新了我的答案以反映您更新的评论：）我用我现在使用的代码更新了我的原始问题。请看一看，并让我知道，如果有任何变化是必需的。它现在正在工作，但如果代码可以缩短或更干净，那么我想知道。谢谢。为什么要使用另一个库来实现OP当前使用的库可以实现的功能？@zesda Livequery只是解决此问题的一个选项。当您使用这种动态生成html的库（datatables）时，很容易出现这种问题。如果已经应用了

tooltipster

，为什么还要再次应用它呢？不要质疑您的解决方案，也不要强迫OPs做出正确的决定。但是，默认情况下，DataTables提供了解决这个问题的选项。我不知道

livequery

本身的功能，但是，在我看来，对一个配置进行简单的修改，不管是否包含额外的库，这都是一个更好的方法。我喜欢使用livequery插件，因为它使您的代码更干净，但这是一个个人选项。我同意你的观点，如果没有必要的话，应该避免包含一些库

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

     });

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

     });
}

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