Lightcase.js和dataTables.js衝突

Question

我正在使用lightcase.js將另一頁作爲iframe加載到我的頁面上。在這裏，我還使用dataTables.js將數據呈現給我的用戶，以便他可以在與該記錄相關的末尾單擊一個眼睛圖標，以便他可以查看更多信息並使用lightrame在與iframe相同的頁面中打開該頁面。

問題是，在我的datable的頁面1它工作正常。但是當它有更多的記錄並且轉到大於1的頁面時，燈箱停止工作，所以當用戶點擊眼睛圖標頁面時，瀏覽器將重定向到該頁面。

示例代碼：

<script src="http://localhost/mysite/assets/js/jquery.dataTables.min.js"></script> 
<script src="http://localhost/mysite/assets/js/lightcase.js"></script> 
<table id="example" class="display" cellspacing="0" width="100%"> 
    <thead> 
    <tr> 
     <th>ID</th> 
     <th>Contact #</th> 
     <th>Time</th> 
     <th>Product</th> 
     ..... 
     ..... 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>9</td> 
     <td>0718064010</td> 
     <td>2015-06-23 11:30:20</td> 
     <td>takas</td> 
     ..... 
     ..... 
     <td><a href="http://localhost/mysite/index.php/inquiry/view/9" data-rel="lightcase:myCollection"><i class="fa fa-eye"></i></a></td> 
    </tr> 
    </tbody> 
</table> 
<script> 
    $(document).ready(function() { 
    $('#example').DataTable(); 
    }); 
</script> 
<script type="text/javascript"> 
    jQuery(document).ready(function ($) { 
    $('a[data-rel^=lightcase]').lightcase(); 
    }); 
</script> 

請幫我解決這個問題。謝謝。

Answer 1

這是因爲您只在第1頁的可見行上附加了一個點擊處理程序到<a>標籤。每次dataTables重新繪製時，即用戶單擊其他頁面時，都必須附加處理程序。將兩個文檔就緒部分替換爲：

$(document).ready(function() { 
    $('#example').on('draw.dt', function() { 
     $('a[data-rel^=lightcase]').lightcase(); 
    }); 
    $('#example').DataTable(); 
});