DataTables page 2 of pagination not calling Magnific Popup

Question

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 al

Answer 1

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.