1

我在使用带有 jQ​​uery 数据表的 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>';
}

上面的代码正在运行。我想知道这是否可以缩短或比现在更清洁。

谢谢。

4

4 回答 4

1

尝试这个：

$("#tblCurrentEnrollments").DataTable({
        "pageLength": 25,
        "fnDrawCallback": function(){
           // initialize tooltipster here
      }
    });
于 2017-01-31T06:58:00.370 回答
0

如果您将 dataTable 分页与 Tooltipster 一起使用，并且您的工具提示在 DOM 中不可用，$.fn.tooltipster()则称为您在其他数据表“页面”上的后续未初始化工具提示将不起作用。

由于您没有在此处包含 Tooltipster 的代码，因此我将做出一些假设，但一个想法是调用您的 Tooltipster 初始化函数，例如$('.tooltip').tooltipster()，对于每个 dataTable“页面”下一次和上一次点击，以及不只是在你的$(document).ready()（又一个假设）。

更新：（根据您更新的评论）

在这种情况下，您需要使用一个名为 的 DataTable 参数fnCreatedCell。这将允许您在 DOM 元素mRender可用后对其进行修改，原始 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%"
    }
]

我希望这有帮助 ：）

于 2014-11-06T12:16:28.233 回答
0

使用实时查询：

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

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

于 2014-11-06T15:10:56.523 回答
0

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

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

     });

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

     });
}

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

于 2014-11-06T16:28:58.520 回答