Fancybox data-source not working after page 2 of datatables

Question

It's bug or ... am I dumb?

For starters, I'm writing some PHP code using jQuery datatables and fancyapps. And I'm creating some buttons on datatables row with the id from that row. The code is too long with many js/css extension, so here the code pen:

https://codepen.io/anon/pen/RXpREY

All the link is working for fancyapp, but why the [detail] button from page 2-3 of the datatables not working? it's start in this code

<td>
    <a data-fancybox2 data-type="iframe" href="javascript:;" data-src="detail.php?id=15" class="smallbutton">Detail</a> <a class="smallbutton" data-fancybox data-type="iframe" href="javascript:;" data-src="edit.php?id=15">Edit</a> 
    <a class="smallbutton" href="delete.php?id=15">Delete</a> 
</td>

What more strange is, the [edit] button from all the page is working. Is there something I am missing? I feel really dumb because of this.

Answer 1

Fancybox is initialized through delegation using the [data-fancybox] attribute by default which is why your edit link is working regardless of table redraws.

However, you'll notice that your settings do not persist for the edit link, which is your first clue.

You want to initialize Fancybox each time the table is drawn/redrawn.

table.on('draw', function() {
  $('[data-fancybox]', this).fancybox({
    toolbar: false,
    smallBtn: true,
    iframe: {
      preload: false,
      css: {
        width: '600px'
      }
    },
    afterClose: function() {
      window.location.reload();
    }
  });
  $('[data-fancybox2]', this).fancybox({
    width: 600,
    toolbar: false,
    smallBtn: true,
    iframe: {
      preload: false
    }
  });
})

As per this updated example.