Question

我有一个使用jQuery Pagination的记录页面。我还使用jQuery Colorbox插件进行弹出。它在记录的第一页工作正常，但当我在我的分页中单击下一页选项时，颜色框弹出窗口停止工作。第一页有10条记录，弹出窗口仅适用于那10条记录，即使您从选项中选择100 /页也是如此。出于测试目的，我在线上传。

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

到目前为止，我理解当我将以下3个js文件放在页面底部时发生冲突。

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

当我把它放在colorbox js文件之前，然后弹出仅适用于前10个记录。

Answer 1

使用DataTables插件并且在使用分页时，只有DOM [1]中存在可见项。因此，在初始化颜色框时，这仅适用于表中的前10行。

每次进入下一页或上一页时，都需要再次初始化颜色框。我检查了一下DataTables页面，但是我没有找到页面更改时的回调事件。作为替代方案，我想使用fnRowCallback回调来初始化每一行的颜色框。

编辑：因此，table#sample_1的初始化将是：

$('#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%" });
    }
});

jQuery插件与colorbox冲突

1 个答案: