I should add a tooltip to datatables row
//initialize datatable
$scope.anomaliesTable = $('#sapTable').DataTable({
//disable responsive
responsive: true,
//"bLengthChange": false,
//deferRender: true,
scrollY: '60vh',
scrollCollapse: true,
info: false,
paging : false,
//scroller: true,
select: true,
columns: [
{ data: 'can_name' },
//other columns data
],
columnDefs: [
{
"className": "dt-center", "targets": "_all"
},
],
});
The row are added from web socket subscription with the row.add
method
$scope.anomaliesTable.row.add(data).draw(false);
In the other table, where the data is loaded from ajax, I used
rowCallback: function( row, data, index ) {
row.setAttribute('data-toggle',"tooltip");
row.setAttribute('data-placement',"left");
row.setAttribute('title', 'UIID: ' + data.uuid);
}
but it doesn't work because it adds browser tooltip and only on the older row. Do you have some advice?
When adding a new row, you can get newly created node by using node()
API method.
var row = $scope.anomaliesTable.row.add(data).draw(false).node();
You can use rowCallback
to add necessary data-
attributes or add them after adding a new row, for example:
$(row).attr({
'data-toggle': 'tooltip',
'data-placement': 'left',
'title': 'UIID: ' + data.uuid
});
You can then initialize tooltip plug-in, for example:
$('[data-toggle="tooltip"]', row).tooltip();
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.