1

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>';
}

上記のコードは機能しています。これを短くするか、現在よりもきれいにすることができるかどうかを知りたい.

ありがとう。

4

4 に答える 4

0

Tooltipster で dataTable のページネーションを使用していて、$.fn.tooltipster()が呼び出された時点でツールチップが DOM で使用できない場合、他の dataTable の「ページ」での後続の初期化されていないツールチップは機能しません。

$('.tooltip').tooltipster()ここに Tooltipster のコードが含まれていないので、いくつかの仮定を行いますが、dataTable の「ページ」の次のクリックと前のクリックのそれぞれについて、Tooltipster の init 関数を次のように呼び出すことをお勧めします。あなただけではあり$(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

私は同じ問題を抱えていました。これは、イベントリスナーをページに別のスプレッドで配置しないために発生します。私はこれで解決しました。

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

     });

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

     });
}

この例では、別のページのイベントをバインドします。

于 2014-11-06T16:28:58.520 に答える