弹出窗口悬停不在数据表的第二页上工作 [英] 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>'
 }

以下代码是创建数据表

$('#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();

但是只在第一页上的数据表中，悬停上的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?

推荐答案

每次重绘dataTable时都需要重新初始化弹出窗口。 $（'[data-toggle =popover]'）。popover（）只会初始化代码执行时可见的弹出窗口，而不是弹出窗口示例页面＃2。在 <$ c中执行 popover（） $ c> drawCallback（） 回调：

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

这篇关于弹出窗口悬停不在数据表的第二页上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！