Lightcase.js 和 dataTables.js 冲突

Question

我正在使用 lightcase.js 将另一个页面作为 iframe 加载到我的页面上。在这里，我还使用 dataTables.js 向我的用户展示数据，以便他可以单击与该记录相关的末尾的眼睛图标，以便他可以查看更多信息，并且 lightcase 在与 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>

请帮我解决这个问题。谢谢。

Answer 1

这是因为您只将点击处理程序附加到可见行上的 <a>-标签，第 1 页。每次重绘 dataTables 时都必须附加处理程序，即当用户单击另一个页面时。将两个文档就绪部分替换为：

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

Lightcase.js 和 dataTables.js 冲突

Lightcase.js and dataTables.js Conflict

html

javascript

iframe

jquery

datatables