我正在使用lightcase.js将另一个页面作为iframe加载到我的页面上。在这里,我还使用dataTables.js向我的用户呈现数据,这样他就可以点击与该记录相关的末尾的眼睛图标,这样他可以查看更多信息,并在iframe的同一页面中轻松打开该页面。
问题是,在我的数据表的第1页中,它运行良好。但当它有更多的记录并转到页面>1时,lightcase就会停止工作,所以当用户点击眼睛图标页面时,浏览器会重定向到该页面。
示例代码:
<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>
请帮我解决这个问题。非常感谢。
这是因为您只将一个点击处理程序附加到可见行(第1页)上的<a>
标记。每次重新绘制dataTables时,即用户单击另一个页面时,都必须附加处理程序。将两个文档准备部分替换为:
$(document).ready(function () {
$('#example').on('draw.dt', function() {
$('a[data-rel^=lightcase]').lightcase();
});
$('#example').DataTable();
});