Akshay Ambekar Akshay Ambekar - 1 month ago 14
Javascript Question

popover on hover not working on second page of datatable

I added content of one column dynamically...

for (var i = 0; i < data.length; i++) {
data.referred_by='<a href="#" data-toggle="popover" class="" title="'+temp[i].referred_by+'"data-trigger="hover" data-content="Total Referrals :'+temp[i].as_count+'">'+temp[i].referred_by+'</a>'
}


and Following code is of creating datatable

$('#datatable4').dataTable({
'paging': true, // Table pagination
'ordering': true, // Column ordering
'info': true, // Bottom left status text
"aaData" : data,

aoColumns: [
{ mData: 'index' },
{ mData: 'patient_name' },
{ mData: 'age' },
{ mData: 'gender' },
{ mData: 'mobile_no' },
{ mData: 'email_id' },
{ mData: 'request_status' },
{ mData: 'referred_by' },
{ mData: 'ref_to_img'},
{ mData: 'ref_by_img'}
]


and in ready function I added

$('[data-toggle="popover"]').popover();


but in datatable only on first page popover on hover is working... and on second page onwards its not working.... is there any solution for this?

Answer

You need to reinitialize the popovers each time the dataTable is redrawn. $('[data-toggle="popover"]').popover() will only initialize those popovers visible at the time the code is executed, not the popovers in for example page #2. Execute popover() in the drawCallback() callback instead :

$('#datatable4').dataTable({
  ...
  drawCallback: function() {
    $('[data-toggle="popover"]').popover();
  }  
})
Comments