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

Question

所以我有这个启用分页的数据表，我编码了一种方式，以便用户可以编辑表的行，当用户调用它在放大弹出窗口中打开的编辑页面时，它在第 1 页上运行良好，从第 1 页开始2 的 DataTable 及其前面停止调用放大弹出窗口，我只是找不到原因......

带有在放大弹出窗口中打开的表单的 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'
      });
   }
});

链接

参见jQuery DataTables: Custom control does not work on second page and after了解更多示例和详细信息。