6

我遇到了一些奇怪的问题，工具提示仅在第 1 页上工作。如果我单击下一页，我看不到任何工具提示。

我正在使用 jquery 数据表。我的示例代码在 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

6

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

那是因为您在 document.ready 函数中设置了 title 属性...所以这适用于<tr>文档准备就绪时在文档中找到的所有内容，而不适用于按下下一步时出现的其他页面中的内容。 ..

一种解决方法是创建一个函数并在 document.ready 和 next click 中调用它......（虽然不是一种有效的方式..）（你可能也需要这个来进行 prev click）

试试这个

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

在这里提琴

于 2013-04-01T05:28:06.100 回答
2

更好的解决方案

将此代码包含在您的数据表中

"drawCallback": function( settings ) {

                            toolTipShow(); // your tootlip function.

                        },
于 2016-09-13T14:24:40.287 回答
2

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

$('#your-datatable-id').on('draw.dt', function() {
     $('[data-toggle="tooltip"]').tooltip(); // Or your function for tooltips
});
于 2018-06-18T16:34:52.820 回答
1

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

DataTables 有一个 $ 函数，它的工作方式与常规的 jQuery $ 函数类似，只是它仅限于该数据表实例。http://datatables.net/api要选择数据表实例的每一行，你会做$('#id').dataTable().$('tr');

使用它，每次用户单击下一步时，都会分配一次标题属性。它也适用于数据表的所有页面。

对于您的实现，它会像这样工作：（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 回答
0

通过 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

于 2018-11-08T03:56:32.323 回答
0

我检查了数据表的分页按钮共有的类，并在 jquery 中创建了一个函数来在单击事件时启动引导工具提示。按钮的类是'paginate_button'。

所以

        $(document).on('click', 'a.paginate_button', function() {
            $('[data-toggle="tooltip"]').tooltip();
        })

文档加载后在主脚本的根目录中

于 2021-11-26T17:00:37.503 回答