I have Jquery datatable which show percentage of data completeness in each column. When i hover my mouse over a <td>
, the data will appear. It's working on the first page of my datatable however it does not work when page is changed or data is searched. I have three classes for the 3 columns. How do I get it work? Below is my code:
PHP:
<table id="pic_table" class="table" class="display">
<thead>
<tr>
<th class="filterhead"></th>
<th class="filterhead"></th>
<th class="filterhead"></th>
</tr>
<tr>
<th>Project Reference</th>
<th>Basic Profile</th>
<th>Employment Permits</th>
</tr>
</thead>
<tbody>
<?php while($row = sqlsrv_fetch_array( $sql_stmt, SQLSRV_FETCH_NUMERIC)){
$pr_stats = intval($row[0]);
$bp_stats = intval($row[1]);
$ep_stats = intval($row[2]);
$userid = $row[3];
echo"<tr>";
/************column to show data when hovered*****************/
echo "<td class='prbk' data-toggle='popover' data title='".$userid."'>".$pr_stats."%</td>";
/************column to show data when hovered*****************/
echo "<td class='bpbk' data-toggle='popover' data-title='".$userid."'>".$bp_stats."%</td>";
/************column to show data when hovered*****************/
echo "<td class='epbk' data-toggle='popover' data-title='".$userid."'>".$ep_stats."%</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
JS:
/*******************************Datatable**********************************/
$('#pic_table').DataTable({
initComplete: function () {
var i = 0;
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value="">All</option></select>')
.appendTo( $('.filterhead').eq(i).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
i++;
} );
}
});
/*******************************Tooltip**********************************/
$('.prbk, .bpbk, .epbk').popover({
title:'Details',
content:fetchData,
html:true,
trigger: 'hover',
placement:'right',
container: 'body',
});
function fetchData(){
var fetch_data = '';
var element = $(this);
var id = element.attr("data-title");
var status = element.attr("class");
$.ajax({
url:"fetch_details.php",
method:"POST",
async:false,
data:{id:id,status:status},
success:function(data){
fetch_data = data;
}
});
return fetch_data;
}