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

时间:2017-08-01 19:08:15

标签: php mysql ajax datatables

所以我启用了这个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中打开编辑页面。

任何帮助?

1 个答案:

答案 0 :(得分:0)

原因

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