彈出窗口懸停不在數據表的第二頁上工作

Question

我動態地添加了一列的內容......

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

以下代碼是創建數據表

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

在准備好的功能中我添加了

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

但在數據表中僅在第一頁上懸停時彈出正在工作......並且在第二頁以后它不起作用....是否有任何解決方案？

Answer 1

每次重繪dataTable時都需要重新初始化彈出窗口。 $('[data-toggle="popover"]').popover()僅初始化執行代碼時可見的$('[data-toggle="popover"]').popover() ，而不是例如頁面＃2中的彈出窗口。 執行popover()在drawCallback()回調而不是：

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