popover on hover not working on second page of datatable

Question

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?

Solution

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

[sqsinger]

Could you include your HTML? Further context might help. Consider setting up a demo with jsfiddle.net

[Wahyu Kodar]

not work for drawCallback: function() { $('[data-toggle="tooltip"]').tooltip(); }

[davidkonrad]

@WahyuKodar $('[data-toggle="tooltip"]').tooltip() will certainly work if you have data-toggle="tooltip" included in your tooltip elements.