popover auf schweben nicht funktioniert auf der zweiten Seite der Datentabelle

Question

I Inhalt einer Spalte dynamisch hinzugefügt ...

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>' 
} 

und folgenden Code ist Datentabelle zu schaffen

$('#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'} 
    ] 

und in Ready-Funktion I hinzugefügt

aber in Datentabelle nur auf der ersten Seite Popover auf Hover funktioniert ... und auf der zweiten Seite ab geht es nicht .... gibt es dafür eine Lösung?

Answer 1

Sie müssen die Popovers jedes Mal neu initialisieren, wenn die dataTable neu gezeichnet wird. $('[data-toggle="popover"]').popover() werden nur diejenigen Popovers initialisieren, die zum Zeitpunkt der Ausführung des Codes sichtbar sind, nicht die Popovers in zum Beispiel Seite 2. Führen Sie popover() im drawCallback() Rückruf statt:

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