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=\'

        

Answer 1

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();
  }  
})