0

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;
             }
mplungjan
  • 169,008
  • 28
  • 173
  • 236
ThaiThai
  • 127
  • 1
  • 7

0 Answers0