Fancybox 数据源在数据表的第 2 页之后不工作

Question

这是错误还是……我是笨蛋？

首先，我正在使用 jQuery 数据表和 fancyapps 编写一些 PHP 代码。我正在使用该行的 id 在数据表行上创建一些按钮。代码太长，扩展名很多js/css，这里代码笔：

所有 link 都对 fancyapp 有效，但为什么数据表第 2-3 页的 [详细信息] 按钮不起作用？从这段代码开始

<td>
    <a data-fancybox2 data-type="iframe" href="javascript:;" data-src="detail.php?id=15" class="smallbutton">Detail</a> <a class="smallbutton" data-fancybox data-type="iframe" href="javascript:;" data-src="edit.php?id=15">Edit</a> 
    <a class="smallbutton" href="delete.php?id=15">Delete</a> 
</td>

更奇怪的是，所有页面的[编辑]按钮都起作用了。有什么我想念的吗？因为这个我觉得真的很蠢。

Answer 1

默认情况下，Fancybox 使用 [data-fancybox] 属性通过委托进行初始化，这就是为什么无论 table 重绘如何，您的编辑 link 都可以正常工作。

但是，您会注意到您的设置不会持续编辑 link，这是您的第一条线索。

您想在每次 table 为 drawn/redrawn 时初始化 Fancybox。

table.on('draw', function() {
  $('[data-fancybox]', this).fancybox({
    toolbar: false,
    smallBtn: true,
    iframe: {
      preload: false,
      css: {
        width: '600px'
      }
    },
    afterClose: function() {
      window.location.reload();
    }
  });
  $('[data-fancybox2]', this).fancybox({
    width: 600,
    toolbar: false,
    smallBtn: true,
    iframe: {
      preload: false
    }
  });
})

根据 this updated example.

Answer 2

当您使用 $(something).fancybox() 初始化 fancybox 时，您正在为页面上当前存在的项目应用自定义选项。对于以后会存在的项目，出现在DOM或者使用selector选项（见http://fancyapps.com/fancybox/3/docs/#usage）后，需要重新初始化，例如：

$().fancybox({
    selector : '[data-fancybox]',
    toolbar: false,
    smallBtn: true,
    iframe: {
        preload: false,
        css : {
            width: '600px'
        }
    }, 
    afterClose : function() { 
        window.location.reload();
    }
});

Fancybox 数据源在数据表的第 2 页之后不工作

Fancybox data-source not working after page 2 of datatables

html

jquery

datatables

fancybox