分页的DataTables第2页未调用Magnific Popup [英] DataTables page 2 of pagination not calling Magnific Popup

问题描述

因此，我启用了具有分页功能的DataTable，我对它进行了编码，以便用户可以编辑表的行，当用户调用它在Magnific Popup中打开的编辑页面时，在第1页的第一个页面上都可以正常工作DataTable中的2个及其前面的它停止调用Magnific Popup，而我只是不知道为什么...

So I have this DataTable with pagination enabled which I coded a way so the user can edit lines of a table, when the user calls the edit page it opens in a Magnific Popup, it all works well on page 1, from page 2 of the DataTable and ahead it stops calling the Magnific Popup and I just can't find out why...

在Magnific Popup内部打开的形式的edit.php具有以下div:

The edit.php with the form which opens inside the Magnific Popup has this 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;

在我的索引处，我具有以下功能:

At my index I have this function:

$('.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中打开编辑页面.

The process is Link which class calls the function and then opens the edit page inside the Magnific Popup.

有帮助吗?

推荐答案

原因

DOM中仅提供首页元素，这就是为什么jQuery选择器$('.popup-ajax')不会从首页之外的其他页面中选择元素的原因.

CAUSE

Only first page elements are available in DOM, that is why your jQuery selector $('.popup-ajax') doesn't select elements from pages other than first.

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

You need to initialize Magnific Popup inside callback defined by drawCallback option. This function will be called every time the table has been redrawn.

例如:

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

链接

请参见 jQuery数据表:自定义控件在第二页及其后的页面上无效，以获取更多示例和详细信息.

LINKS

See jQuery DataTables: Custom control does not work on second page and after for more examples and details.

这篇关于分页的DataTables第2页未调用Magnific Popup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！