感谢您查看我的麻烦。
我已经看过很多关于这个主题的相关主题，试过很多解决方案，但它仍然没有解决我的问题。
我有一个生成的DataTable，我想要一些自定义工具提示出现在单元格上。为简短起见，我们假设我只希望tr显示<!-- REQUIRED JS SCRIPTS -->
<!-- jQuery 2.2.3 -->
<script src="/miscellaneous/adminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/miscellaneous/adminLTE/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="/miscellaneous/adminLTE/dist/js/app.min.js"></script>
<!-- Data Tables -->
<script src="/miscellaneous/bov2/js/jquery.dataTables.min.js"></script>
<script src="/miscellaneous/bov2/js/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="/miscellaneous/adminLTE/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/miscellaneous/adminLTE/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/miscellaneous/adminLTE/dist/js/demo.js"></script>
<!-- page script -->
<script>
$(document).ready(function () {
/* Init DataTables */
$('#example').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"processing": true,
"serverSide": true,
"ajax": {
"url": "{{ path('tableUserAjax') }}",
"type": "POST",
"dataType": "json",
},
"columns": [
{"data": "login"},
{"data": "name"},
{"data": "date"},
{"data": "language"},
{"data": "group"},
{"data": "role"},
{"data": "valid"}],
"fnDrawCallback": function (oSettings) {
$('#example tbody tr').each(function () {
var sTitle;
var nTds = $('td', this);
var s0 = $(nTds[0]).text();
sTitle = "<h1>" + s0 + "</h1>";
this.setAttribute('rel', 'tooltip');
this.setAttribute('title', sTitle);
});
}
});
/* Apply the tooltips */
$('#example').tooltip({
html : true,
/* i tried this : content: "<b>Bold</b>, <i>Italic</i>",*/
});
});
</script>
标记。
这是我经过多次改变后实际拥有的：
<table class="table table-bordered table-hover dataTable no-footer" id="example" role="grid" style="width: 1163px;" data-original-title="" title="">
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 96.2px;"
aria-sort="ascending" aria-label="Login: activate to sort column descending">Login
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 176.2px;"
aria-label="Name: activate to sort column ascending">Name
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 201.2px;"
aria-label="Date: activate to sort column ascending">Date
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 145.2px;"
aria-label="Language: activate to sort column ascending">Language
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 102.2px;"
aria-label="Group: activate to sort column ascending">Group
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 83.2px;"
aria-label="Role: activate to sort column ascending">Role
</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" style="width: 88px;"
aria-label="Valid: activate to sort column ascending">Valid
</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd" rel="tooltip" title="<h1>Aaron</h1>">
<td class="sorting_1">Aaron</td>
<td>Aaron MARTIN</td>
<td>30 mars 2016</td>
<td>English</td>
<td>Marketing</td>
<td></td>
<td>0</td>
</tr>
</tbody>
</table>
这是我的HTML表格（有一个简洁的表格）：
testing.component.ts不应该这样做吗？
答案 0 :(得分：3)
所以，基于命题，我发现问题来自ajax DataTable（它重新加载html并使每个声明的相关函数松散，包括工具提示。
我的最终解决方案是在fnDrawCallback参数中添加工具提示。见下文：
<script>
$(document).ready(function () {
/* Init DataTables */
$('#example').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": true,
"processing": true,
"serverSide": true,
"ajax": {
"url": "{{ path('tableUserAjax') }}",
"type": "POST",
"dataType": "json",
},
"columns": [
{"data": "login"},
{"data": "name"},
{"data": "date"},
{"data": "language"},
{"data": "group"},
{"data": "role"},
{"data": "valid"}],
"fnDrawCallback": function (oSettings) {
$('#example tbody tr').each(function () {
var sTitle;
var nTds = $('td', this);
var s0 = $(nTds[0]).text();
var s1 = $(nTds[1]).text();
var s2 = $(nTds[2]).text();
var s3 = $(nTds[3]).text();
var s4 = $(nTds[4]).text();
var s5 = $(nTds[5]).text();
sTitle = "<h1>"+s0+"</h1>";
this.setAttribute('rel', 'tooltip');
this.setAttribute('title', sTitle);
console.log(this);
console.log($(this));
$(this).tooltip({
html: true
});
});
}
});
});
</script>
答案 1 :(得分：2)
如果您想要将HTML添加到特定单元格，则可以使用columns定义中的render函数：
"columns": [
{"data": "login"},
{"data": "name",
"render": function(data,type,full){
if(type==='display'){
return '<i>'+data+'</i>'
}
return data;
}
},
{"data": "date"},
{"data": "language"},
{"data": "group"},
{"data": "role"},
{"data": "valid"}],
在此示例中，与“name”对应的数据将以斜体显示。如果您希望获得工具提示，只需将<i>标记替换为<span title='tooltip'>标记即可。
请务必查看render文档以获取更多信息！
如果您想要的是每个单元格中的工具提示，请将drawCallback替换为[rowCallback] [2]。每次（重新）绘制表时（在过滤，排序，初始化等时）都会调用drawCallback。当数据表生成一行时，将调用RowCallback。
答案 2 :(得分：1)
您可以使用：
table.cells().every( function () {
$(this.node()).tooltip({
html : true,
content: "<b>Bold</b>, <i>Italic</i>",
});
});
table = $（'＃example'）。DataTable（....）;
答案 3 :(得分：0)
这将为所有数据表全局设置
$( document ).ajaxComplete(function() {
// Required for Bootstrap tooltips in DataTables
$('[data-toggle="tooltip"]').tooltip({
"html": true,
"delay": {"show": 1000, "hide": 0},
});
});