jquery - La información sobre herramientas no funciona en las filas secundarias de tablas de datos
datatables datatables-1.10 (2)
Intente proporcionar tooltip sobre tooltip como se fnDrawCallBak continuación y no en fnDrawCallBak sino en $(document).ready
$(''body'').tooltip({
selector: ''[rel=tooltip]''
});
Bootstrap Tooltip no funciona en filas secundarias con jQuery DataTables.
Con fnDrawCallback funciona en las filas habituales, pero no tiene efecto en las filas secundarias, y no tengo idea de cómo hacer que funcione.
"fnDrawCallback": function( oSettings ) {
$(''[rel="tooltip"]'').tooltip();
}
Consulte las filas secundarias y fnDrawCallback para referencia.
Ejemplo de 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" 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>
Fuente 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"
}
]
}
También puede ver que si elimina:
"fnDrawCallback": function( oSettings ) {
$(''[rel="tooltip"]'').tooltip();
},
Las filas habituales que contienen una información sobre herramientas no funcionarán.
Fuentes:
Simplemente cambie el archivo row_details.html con mi código html para ver el caso de prueba (y agregue el archivo objects.txt a la misma carpeta).
Use createdRow para inicializar información sobre herramientas en filas regulares.
"createdRow": function(row, data, dataIndex){
$(''[data-toggle="tooltip"]'', row).tooltip();
}
En cuanto a las filas secundarias, modifique su código de la siguiente manera:
// 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();
Vea el fragmento a continuación para el código y la demostración.
/* 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>