工具提示在数据表子行上不起作用 [英] Tooltip doesn't work on datatables child rows
本文介绍了工具提示在数据表子行上不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
引导工具提示对于具有jQuery DataTables的子行不起作用。
使用 fnDrawCallback 它适用于通常的行，但它对子行没有影响，我不知道如何使其工作。
fnDrawCallback：function（oSettings）{
$（'[rel =tooltip]'）。 tooltip（）;
}
请参阅子行和 fnDrawCallback 作为参考。
HTML示例：
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< link rel =快捷图标type =image / icohref =http://www.datatables.net/favicon.ico>
< meta name =viewportcontent =initial-scale = 1.0，maximum-scale = 2.0>
< title> DataTables示例 - 子行（显示额外/详细信息）< / title>
< link rel =stylesheettype =text / csshref =../../ media / css / jquery.dataTables.css>
< link rel =stylesheettype =text / csshref =../ resources / syntax / shCore.css>
< link rel =stylesheettype =text / csshref =../ resources / demo.css>
< style type =text / cssclass =init>
td.details-control {
background：url（'../ resources / details_open.png'）不重复中心;
cursor：pointer;
}
tr.shown td.details-control {
background：url（'../ resources / details_close.png'）no-repeat center center;
}
< / style>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js>< / script>
< script type =text / javascriptlanguage =javascriptsrc =../../ media / js / jquery.dataTables.js>< / script>
< script type =text / javascriptlanguage =javascriptsrc =../ resources / syntax / shCore.js>< / script>
< script type =text / javascriptlanguage =javascriptsrc =../ resources / demo.js>< / script>
<！ - 最新编译和最小化的CSS - >
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css>
<！ - 最新编译和最小化的JavaScript - >
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js>< / script>
< script type =text / javascriptlanguage =javascriptclass =init>
/ *行详细信息的格式化功能 - 根据需要修改* /
函数格式（d）{
//`d`是原始数据对象对于行
返回'< table cellpadding =5cellspacing =0border =0style =padding-left：50px;>'+
'< tr> '+
'< td>全名：< / td>'+
'< td>'+ d.name +'< / td>'+
' / tr>'+
'< tr>'+
'< td>分机号码：< / td>'+
'< td>'+ d.extn + < / td>'+
'< / tr>'+
'< tr>'+
'< td>工具提示：< / td>'+
'< td>< span rel =tooltipdata-toggle =tooltipdata-placement =toptitle =data-original-title =显示工具提示class =souligne> ;带有工具提示的文本< / span>< / td>'+
'< / tr>'+
'< / table>';
}
$（document）.ready（function（）{
var table = $（'＃example'）。DataTable（{
ajax objects.txt，
columns：[
{
className：'details-control'，
可订购：false，
：null，
defaultContent：''
}，
{data：name}，
{data：position}，
{data：office}，
{data：salary}
]，
fnDrawCallback：function（oSettings）{
$ '[rel =tooltip]'）。tooltip（）;
}，
order：[[1，'asc']]
}）;
//添加事件监听器以打开和关闭详细信息
$（'＃example tbody'）。on（'click'，'td.details-control'，function（）{
var tr = $（this）.closest（'tr'）;
var row = table.r ow（tr）;
if（row.child.isShown（））{
//这行已经打开 - 关闭它
row.child.hide（）;
tr.removeClass（'shown'）;
}
else {
//打开此行
row.child（format（row.data（）））.show（）;
tr.addClass（'shown'）;
}
}）;
}）;
< / script>
< / head>
< body class =dt-example>
< div class =container>
< section>
< h1> DataTables示例< span>子行（显示额外/详细信息）< / span>< / h1>
< table id =exampleclass =displaycellspacing =0width =100％>
< thead>
< tr>
< th>< / th>
< th> Name< / th>
< th> Position< / th>
< th> Office< / th>
< th>工资< / th>
< / tr>
< / thead>
< tfoot>
< tr>
< th>< / th>
< th> Name< / th>
< th> Position< / th>
< th> Office< / th>
< th>工资< / th>
< / tr>
< / tfoot>
< / table>
< / section>
< h1>工具提示在外面工作：< / h1>
< span rel =tooltipdata-toggle =tooltipdata-placement =toptitle =data-original-title =显示工具提示class =souligne>一个工具提示< / span>
< / div>
< script type =text / javascript>
$（function（）{
$（'[data-toggle =tooltip]'）。tooltip（）;
}）;
< / script>
< / body>
< / html>
AJAX来源：
{/ pre>
data：[
{
name：< span rel = \tooltip\ -toggle = \tooltip\data-placement = \top \title = \\data-original-title = \这是一个tooltip\class = \ $$$$$$$$$$$$$$$$ 2011/04/25，
office：爱丁堡，
extn：5421
}，
{
name： < span rel = \tooltip\data-toggle = \tooltip\data-placement = \top\title = \\data-original-title = \ 这是一个tooltip\class = \souligne\>测试工具提示< \ / span>，
position：Accountant，
salary $ 162,700，
start_date：2008/11/28，
office：Tokyo，
extn：5 407
}，
{
name：Brielle Williamson，
position：Integration Specialist，
salary：$ 372,000 ，
start_date：2012/12/02，
office：纽约，
extn：4804
}，
{
name：Herrod Chandler，
position：Sales Assistant，
salary：$ 137,500，
start_date / 08/06，
office：旧金山，
extn：9608
}，
{
name b $ b位置：积分专家，
salary：$ 327,900，
start_date：2010/10/14，
办公室：东京，
extn：6200
}，
{
name：Michael Bruce，
position $ $ $$ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $$ $ $ $ $ $ $ $ $ extn：5384
}，
{
na我：Donna Snider，
position：客户支持，
salary：$ 112,000，
start_date：2011/01/25，
office：纽约，
extn：4226
}
]
}
您还可以看到，如果您删除：
fnDrawCallback：function（oSettings）{
$（'[rel =tooltip]'）。tooltip（）;
}，
包含工具提示的常规行将无法正常工作。
资料来源
只需使用我的html代码更改文件 row_details.html 即可查看测试用例（并添加文件对象.txt 到同一个文件夹）。
解决方案
尝试提供 tooltip 如下，而不是 fnDrawCallBak ，但在 $（document）.ready
$（'body'）。tooltip（{
selector：'[rel = tooltip]'
}）;
Bootstrap Tooltip doesn't work on child rows with jQuery DataTables.
With fnDrawCallback it works on usual rows, but it has no effect on child rows, and I have no idea how to make it works.
"fnDrawCallback": function( oSettings ) {
$('[rel="tooltip"]').tooltip();
}
See Child rows and fnDrawCallback for reference.
HTML Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Child rows (show extra / detailed information)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
td.details-control {
background: url('../resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.shown td.details-control {
background: url('../resources/details_close.png') no-repeat center center;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" class="init">
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'+d.name+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Tooltip:</td>'+
'<td><span rel="tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="display the tooltip" class="souligne">text with a tooltip</span></td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "objects.txt",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"fnDrawCallback": function( oSettings ) {
$('[rel="tooltip"]').tooltip();
},
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Child rows (show extra / detailed information)</span></h1>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</section>
<h1>Tooltip works outside:</h1>
<span rel="tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="display the tooltip" class="souligne">text with a tooltip</span>
</div>
<script type="text/javascript">
$(function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
AJAX source:
{
"data": [
{
"name": "<span rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"\" data-original-title=\"this is a tooltip\" class=\"souligne\">Tiger Nixon<\/span>",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "<span rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"\" data-original-title=\"this is a tooltip\" class=\"souligne\">Test tooltip<\/span>",
"position": "Accountant",
"salary": "$162,700",
"start_date": "2008/11/28",
"office": "Tokyo",
"extn": "5407"
},
{
"name": "Brielle Williamson",
"position": "Integration Specialist",
"salary": "$372,000",
"start_date": "2012/12/02",
"office": "New York",
"extn": "4804"
},
{
"name": "Herrod Chandler",
"position": "Sales Assistant",
"salary": "$137,500",
"start_date": "2012/08/06",
"office": "San Francisco",
"extn": "9608"
},
{
"name": "Rhona Davidson",
"position": "Integration Specialist",
"salary": "$327,900",
"start_date": "2010/10/14",
"office": "Tokyo",
"extn": "6200"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"salary": "$183,000",
"start_date": "2011/06/27",
"office": "Singapore",
"extn": "5384"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"salary": "$112,000",
"start_date": "2011/01/25",
"office": "New York",
"extn": "4226"
}
]
}
You can also see that if you remove:
"fnDrawCallback": function( oSettings ) {
$('[rel="tooltip"]').tooltip();
},
usual rows containing a tooltip won't work.
Sources:
Just change the file row_details.html with my html code to see the test case (and add the file objects.txt to the same folder).
解决方案
Try providing tooltip as below and not in fnDrawCallBak but on $(document).ready
$('body').tooltip({
selector: '[rel=tooltip]'
});
这篇关于工具提示在数据表子行上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
