DataTables第2页的分页没有调用Magnific Popup

Question

所以我启用了这个DataTable并启用了分页，我编写了一种方式，以便用户可以编辑表格的行，当用户调用它在Magnific Popup中打开的编辑页面时，它在页面1上运行良好，从页面开始DataTable中的2个以及它停止调用Magnific Popup并且我无法找到原因...

带有在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中打开编辑页面。

任何帮助？

Answer 1

原因

DOM中只有第一页元素可用，这就是为什么你的jQuery选择器$('.popup-ajax')不会从第一页以外的页面中选择元素。

解

您需要在drawCallback选项定义的回调中初始化Magnific Popup。每次重绘表时都会调用此函数。

例如：

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

LINKS

有关更多示例和详细信息，请参阅jQuery DataTables: Custom control does not work on second page and after。