Thi*_*ink 4 jquery tooltip datatables
我有一些奇怪的问题,工具提示仅在页面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');
});
});
Run Code Online (Sandbox Code Playgroud)
小智 7
更好的解决方案
将此代码包含在您的数据表中
"drawCallback": function( settings ) {
toolTipShow(); // your tootlip function.
},
Run Code Online (Sandbox Code Playgroud)
如果我点击下一页,我看不到任何工具提示.
这是因为你在document.ready函数中设置了title属性...所以这适用于<tr>文档准备就绪时文档中找到的所有内容,而不适用于下次按下时出现的其他页面中的内容. ..
一种方法是创建一个函数并在document.ready中调用它,然后单击...(虽然不是一种有效的方式..)(你也可能需要这个来点击prev)
试试这个
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
});
});
Run Code Online (Sandbox Code Playgroud)