6

ツール ヒントがページ 1 でのみ機能するという奇妙な問題が発生しています。次のページをクリックしても、ツール ヒントは表示されません。

jquery dataTable を使用しています。私のサンプルコードは jsfiddle にあります: http://jsfiddle.net/agorur/3r54F/

何か案は ？

var data = {
    "sEcho": 1,
        "iTotalRecords": 6416,
        "iTotalDisplayRecords": 5,
        "aaData": [{
        "0": 421367,
            "1": "Test1",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:12 GMT",
            "5": "TestBench",
            "6": "NA"
    }, {
        "0": 421368,
            "1": "Test2",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:12 GMT",
            "5": "TestBench",
            "6": "NA"
    }, {
        "0": 421369,
            "1": "Test3",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:12 GMT",
            "5": "TestBench",
            "6": "NA"
    }, {
        "0": 421370,
            "1": "Test4",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:13 GMT",
            "5": "TestBench",
            "6": "NA"
    }, {
        "0": 421371,
            "1": "Test5",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:13 GMT",
            "5": "TestBench",
            "6": "NA"
    },{
                     "0": 421372,
            "1": "Test1",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:12 GMT",
            "5": "TestBench",
            "6": "NA"
    }, {
        "0": 421373,
            "1": "Test2",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:12 GMT",
            "5": "TestBench",
            "6": "NA"
    }, {
        "0": 421374,
            "1": "Test3",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:12 GMT",
            "5": "TestBench",
            "6": "NA"
    }, {
        "0": 421375,
            "1": "Test4",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:13 GMT",
            "5": "TestBench",
            "6": "NA"
    }, {
        "0": 421376,
            "1": "Test5",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:13 GMT",
            "5": "TestBench",
            "6": "NA"
    },
                  {
        "0": 421377,
            "1": "Test4",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:13 GMT",
            "5": "TestBench",
            "6": "NA"
    }, {
        "0": 421378,
            "1": "Test5",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:13 GMT",
            "5": "TestBench",
            "6": "NA"
    }]
};

$(document).ready(function () {
    $('#events').dataTable({
        "bProcessing": true,
            "aaData": data.aaData,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "aoColumns": [{
            "mData": "0"
        }, {
            "mData": "1"
        }, {
            "mData": "2"
        }, {
            "mData": "3"
        }, {
            "mData": "4"
        }, {
            "mData": "5"
        }, {
            "mData": "6"
        }, ]
    });


    $("#events tbody tr").each(function () {
        this.setAttribute('title', 'ToolTip');
    });
});
4

7 に答える 7

2

より良い解決策

このコードをデータテーブルに含めます

"drawCallback": function( settings ) {

                            toolTipShow(); // your tootlip function.

                        },
于 2016-09-13T14:24:40.287 に答える
1

これが少し遅れていることは知っていますが、同様の問題に遭遇したばかりであり、これが私の解決策があなたのケースにどのように適用されるかです.

DataTables には、通常の jQuery の $ 関数のように機能する $ 関数がありますが、データ テーブルのそのインスタンスに限定されます。http://datatables.net/apiデータ テーブル インスタンスのすべての行を選択するには$('#id').dataTable().$('tr');

これを使用すると、ユーザーが次にクリックするたびに title 属性が割り当てられます。また、データ テーブルのすべてのページで機能します。

あなたの実装では、次のように動作します: ( jsFiddle )

$(document).ready(function () {
    $('#events').dataTable({
        "bProcessing": true,
            "aaData": data.aaData,
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "aoColumns": [{
            "mData": "0"
        }, {
            "mData": "1"
        }, {
            "mData": "2"
        }, {
            "mData": "3"
        }, {
            "mData": "4"
        }, {
            "mData": "5"
        }, {
            "mData": "6"
        }, ]
    }).$("tr").each(function () {
        this.setAttribute('title', 'Ajay');
    });
});
于 2013-08-27T15:23:35.810 に答える
1

js ファイルまたはスクリプト内に次のコードを追加するだけです。

$("a[rel='tooltip']").tooltip();

ただし、 document.ready() 関数には含めないでください

于 2014-06-25T13:35:05.827 に答える