Question

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

更新：我的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

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

由于你没有在这里包含Tooltipster的代码，我将做一些假设，但一个想法是调用你的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 2

使用livequery：

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

Livequery将在tooltipster类的所有元素中应用demo-interact，即使动态添加元素也是如此。

Answer 3

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

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

     });

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

     });
}

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

Answer 4

试试这个：

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

jQuery Datatables - Tooltipster不在第2页上工作

4 个答案:

更新:(关注您的更新评论）