分页的数据表第 2 页未调用 Magnific Popup

所以我有这个启用分页的数据表，我编码了一种方式，以便用户可以编辑表格的行，当用户调用它在 Magnific Popup 中打开的编辑页面时，它在第 1 页上运行良好，从页面DataTable 的 2 和前面它停止调用 Magnific Popup，我就是不知道为什么......

带有在 Magnific Popup 中打开的表单的 edit.php 有这个 div:

以及以下css:

位置:相对；背景:#FFF；填充:10px；宽度:自动；最大宽度:750px；边距:20px 自动；颜色:#999；字体粗细:粗体；

在我的索引中，我有这个功能:

$('.popup-ajax').magnificPopup({类型:'阿贾克斯'，showCloseBtn: '真',模态:'真'，});

还有这个调用函数的链接:

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

过程是链接哪个类调用函数，然后打开Magnific Popup内的编辑页面.

有什么帮助吗?

解决方案

CAUSE

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

解决方案

您需要在drawCallback 选项.每次重绘表格时都会调用此函数.

例如:

var table = $('#example').DataTable({//... 跳过 ...绘制回调:函数(){$('.popup-ajax').magnificPopup({类型:'阿贾克斯'，showCloseBtn: '真',模态:'真'});}});

链接

参见 jQueryDataTables:自定义控件不适用于第二页及之后以获取更多示例和详细信息.

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...

The edit.php with the form which opens inside the Magnific Popup has this div:

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

And the following 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',
});

And this link to call the function:

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

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

Any help?

解决方案

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.

SOLUTION

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

For example:

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

LINKS

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