数据表工具提示在第二页中不起作用。仅适用于第一页
Posted
技术标签:
【中文标题】数据表工具提示在第二页中不起作用。仅适用于第一页【英文标题】：Datatable tool tip not working in second page. Works only of first page 【发布时间】：2013-03-22 04:54:45 【问题描述】：我遇到了一些奇怪的问题，工具提示仅在第 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');
);
);
【问题讨论】：
当您在分页部分点击下一步然后尝试再次添加该属性... ***.com/questions/7407111/…查看此内容\ 【参考方案1】：如果我点击下一页，我看不到任何工具提示。
那是因为您在 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
);
);
fiddlehere
【讨论】：
下一次点击工作正常。但是，如果我有更多页数，如果我点击第 2、3、4 页......它不起作用。有什么想法吗？ 没关系，我在 $('.pagination') 上添加了点击事件，似乎工作正常。感谢@bipen 嘿...离开了..无论如何都迟到了..很高兴自己喜欢它..:)..干杯..欢迎...快乐编码.. :)【参考方案2】：更好的解决方案
在您的数据表中包含此代码
"drawCallback": function( settings )
toolTipShow(); // your tootlip function.
,
【讨论】：
【参考方案3】：每次重绘表格时初始化工具提示。
$('#your-datatable-id').on('draw.dt', function()
$('[data-toggle="tooltip"]').tooltip(); // Or your function for tooltips
);
【讨论】：
【参考方案4】：我知道这有点晚了，但我刚刚遇到了类似的问题，这就是我的解决方案适用于您的情况的方式。
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');
);
);
【讨论】：
【参考方案5】：只需在您的 js 文件或脚本中添加以下代码即可。
$("a[rel='tooltip']").tooltip();
但不要将其包含在 document.ready() 函数中
【讨论】：
【参考方案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
【讨论】：
【参考方案7】：我检查了数据表的分页按钮共有的类，并在 jquery 中创建了一个函数来在单击事件时启动引导工具提示。 按钮的类是 'paginate_button'。
因此
$(document).on('click', 'a.paginate_button', function()
$('[data-toggle="tooltip"]').tooltip();
)加载文档后在主脚本的根目录中
【讨论】：
以上是关于数据表工具提示在第二页中不起作用。仅适用于第一页的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap Modal 在第二页的 DataTable 中不起作用
怎样在计算机中给第二页添加页脚（第一页不显示页脚），显示页码和文字“PowerPoint”？