工具提示不适用于数据表子行
Posted
技术标签:
【中文标题】工具提示不适用于数据表子行【英文标题】：Tooltip doesn't work on datatables child rows 【发布时间】：2015-11-21 09:34:20 【问题描述】：Bootstrap Tooltip 不适用于带有 jQuery DataTables 的子行。
使用fnDrawCallback，它适用于通常的行，但它对子行没有影响，我不知道如何使它起作用。
"fnDrawCallback": function( oSettings )
$('[rel="tooltip"]').tooltip();
请参阅 Child rows 和 fnDrawCallback 以供参考。
HTML 示例：
<!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" >
<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 来源：
"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"
]
如果你删除，你也可以看到：
"fnDrawCallback": function( oSettings )
$('[rel="tooltip"]').tooltip();
,
包含工具提示的常规行不起作用。
来源：
http://datatables.net/download/packages http://datatables.net/examples/server_side/row_details.html只需用我的 html 代码更改文件 row_details.html 即可查看测试用例（并将文件 objects.txt 添加到同一文件夹中）。
【问题讨论】：
【参考方案1】：使用createdRow 在常规行中初始化工具提示。
"createdRow": function(row, data, dataIndex)
$('[data-toggle="tooltip"]', row).tooltip();
关于子行，修改代码如下：
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
// Initialize tooltips in the child row that follows the parent row
$('[data-toggle="tooltip"]', tr.next('tr')).tooltip();
有关代码和演示，请参见下面的 sn-p。
/* 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 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\">Garrett Winters</span>","position":"Accountant","salary":"$170,750","start_date":"2011/07/25","office":"Tokyo","extn":"8422","name":"<span rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"\" data-original-title=\"this is a tooltip\" class=\"souligne\">Ashton Cox</span>","position":"Junior Technical Author","salary":"$86,000","start_date":"2009/01/12","office":"San Francisco","extn":"1562"];
var table = $('#example').DataTable(
"data": data,
"columns": [
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
,
"data": "name" ,
"data": "position" ,
"data": "office" ,
"data": "salary"
],
"order": [[1, 'asc']],
"createdRow": function(row, data, dataIndex)
$('[data-toggle="tooltip"]', row).tooltip();
);
// 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');
$('[data-toggle="tooltip"]', tr.next('tr')).tooltip();
);
);td.details-control
background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_open.png') no-repeat center center;
cursor: pointer;
tr.shown td.details-control
background: url('https://raw.githubusercontent.com/DataTables/DataTables/1.10.7/examples/resources/details_close.png') no-repeat center center;
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.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>
<table id="example" class="display">
<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>【讨论】：
为您的努力加 1，因为这也很有效.. :)【参考方案2】：尝试如下提供tooltip，而不是fnDrawCallBak，而是$(document).ready
$('body').tooltip(
selector: '[rel=tooltip]'
);
【讨论】：
所以我删除了 fnDrawCallBak 并且我做了：$(document).ready(function() $('[rel="tooltip"]').tooltip(); ); 但它仍然是同样的问题，通常的行不显示工具提示
@Alex1 你在document.ready 中没有正确给出它。检查此 DEMO。您将其粘贴为 $(function() $('[data-toggle="tooltip"]').tooltip(); ); 而 data-toggle 应该是 rel
不知道selector 选项，很好的答案+1！
@Alex1 因为它是一个动态添加的元素，所以您需要一种事件委托，您可以使用工具提示的 selector 选项来做到这一点。您在 cmets 中提到的代码肯定适用于已放置的元素.
@Guruprasad Rao，太棒了！以上是关于工具提示不适用于数据表子行的主要内容，如果未能解决你的问题，请参考以下文章