Question

我有一些奇怪的问题，其中工具提示仅在页面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');
    });
});

Answer 1

如果我点击下一页，我看不到任何工具提示。

这是因为你在document.ready函数中设置了title属性...所以这适用于文档准备就绪时文档中找到的所有<tr>，而不适用于其他页面中的那些function toolTip() { $("#events tbody tr").each(function () { this.setAttribute('title', 'Ajay'); }); } $(document).ready(function () { ... toolTip(); //<--- call this when document is ready so it gets all tr $('.next').click(function () { toolTip(); //and in next click which gets for next tr }); });当你按下下一个出现...

一种方法是创建一个函数并在document.ready中调用它，然后单击...（虽然不是一种有效的方式..）（你也可能需要这个以上的点击）

试试这个

{{1}}

fiddlehere

Answer 2

我知道这有点晚了但我遇到了类似的问题，这就是我的解决方案适用于您的案例。

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

Answer 3

更好的解决方案

将此代码包含在数据表中

"drawCallback": function( settings ) {

                            toolTipShow(); // your tootlip function.

                        },

Answer 4

每次重绘表时初始化工具提示。

$('#your-datatable-id').on('draw.dt', function() {
     $('[data-toggle="tooltip"]').tooltip(); // Or your function for tooltips
});

Answer 5

只需在js文件或脚本中添加以下代码即可。

$（＆＃34; [相对=＆＃39;提示＆＃39;]＆＃34）的工具提示（）;

但是不要将它包含在document.ready（）函数

中

Answer 6

使用以下方法解决了Bootstrap工具提示的相同问题

"drawCallback": function (oSettings) {
                var api = this.api();
                api.rows( { page: 'current' } ).every( function () {
                    var rowData = this.data();
                    var sTitle = "Modified Count: " + rowData.ModifiedCount;
                    $(api.cell(this.index(), 1).node()).find('a').attr('title', sTitle).tooltip({ container: 'body' });
                } );
            }

下面的代码也显示了工具提示，但第一行不可见

$(api.cell(this.index(), 1).node()).attr('title', sTitle).tooltip({ container: 'body' });

所以我在第二个单元格的<a>中添加了工具提示，也解决了上述问题。

$(api.cell(this.index(), 1).node()).find('a').attr('title', sTitle).tooltip({ container: 'body' });

注意：api.cell(this.index(), 1) adds tooltip to 2nd cell

数据表工具提示在第二页中不起作用。仅适用于首页

6 个答案: