DataTables 第 2 页的分页未调用放大弹出窗口

所以我有这个启用分页的数据表，我编码了一种方式，以便用户可以编辑表的行，当用户调用它在放大弹出窗口中打开的编辑页面时，它在第 1 页，从第 2 页起都运行良好。 DataTable 及其前面停止调用 Magnific Popup，我只是不明白为什么......

带有在放大弹出窗口中打开的表单的 edit.php 具有以下 div：

<div id="ajax-content" class="example-popup">

以及以下 CSS：

position: relative;
background: #FFF;
padding: 10px;
width: auto;
max-width: 750px;
margin: 20px auto;
color: #999;
font-weight: bold;

在我的索引中我有这个功能：

$('.popup-ajax').magnificPopup({
   type: 'ajax',
   showCloseBtn: 'true',
   modal: 'true',
});

调用该函数的链接：

echo '<td><a href="http://localhost/teste/include/edit.php?id=' . $row['id'] . '" class="popup-ajax">Editar</a></td>';

该过程是 Link 类调用该函数，然后在 Magnific Popup 内打开编辑页面。

有什么帮助吗？

CAUSE

DOM 中只有首页元素可用，这就是 jQuery 选择器的原因$('.popup-ajax')不从除第一个页面之外的页面中选择元素。

SOLUTION

您需要在回调中初始化 Magnific Popup 定义的drawCallback https://datatables.net/reference/option/drawCallback选项。每次重绘表格时都会调用此函数。

例如：

var table = $('#example').DataTable({
   // ... skipped ...
   drawCallback: function(){
      $('.popup-ajax').magnificPopup({
         type: 'ajax',
         showCloseBtn: 'true',
         modal: 'true'
      });
   }
});

LINKS

See jQuery DataTables：自定义控件在第二页及之后不起作用 https://www.gyrocode.com/articles/jquery-datatables-custom-control-does-not-work-on-second-page/了解更多示例和详细信息。