jQuery plugins conflict with colorbox

Question

I have a page with records using jQuery Pagination. Also i used jQuery Colorbox plugin for popup. Its working fine in the record first page but when i click next page option in my pagination then the color box popup stopped working. First page have 10 records and the popup working only for those 10 records even if you choose 100/page from option. For testing purpose I upload it online.

DEMO : http://aslobi.com/demo/index.php

So far I understand the point that the conflict occur when i bring the following 3 js files at the bottom of the page.

<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/DT_bootstrap.js"></script>
<script type="text/javascript" src="js/dynamic-table.js"></script>

When I put it before colorbox js file then popup working only for 1st 10 records.

Answer 1

With the DataTables plugin and while using pagination only the visible items exist in the DOM [1]. So when you initialize the colorbox, this works only for the first 10 rows in your table.

You need to initialize again the colorbox each time you go to the next or previous page. I checked a bit the DataTables page but I didn't find a callback event for when the page changes. As an alternative I thought to use the fnRowCallback callback to initialize the colorbox for every row.

EDIT: So, the initialization of the table#sample_1 would be:

$('#sample_1').dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {
        "sLengthMenu": "_MENU_ records per page",
        "oPaginate": {
            "sPrevious": "Prev",
            "sNext": "Next"
        }
    },
    "aoColumnDefs": [{
        'bSortable': false,
        'aTargets': [0]
    }],
    "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        jQuery(nRow).colorbox({ inline: true, width: "50%" });
    }
});