DataTables和Nette；刷新代码段删除Datatables元素

Question

我对DataTables和Nette一起工作有问题。

我的JavaScript代码：

$(document).ready(function(){
  $('.table').DataTables();
});

HTML Nette：

{snippet customers}
  <table class="table table-hover" id="userTable">
    <thead>
      <tr>
        <th>Name</th>
        <th>Country</th> 
        <th>Type</th>
      </tr>
    </thead>              
   <tbody>
   {foreach $customers as $customer}
     <tr>
         <td>
           <a href="{$presenter->link(':Customers:show', array('id' => $customer->id))}" target="_blank">
             {$customer->name}
           </a>
          </td>
          <td>{$customer->country}</td> 
          <td>{$customer->type}</td>     
        </tr>
      {/foreach}
    </tbody>
  </table>
{/snippet}

它正常工作，但是当刷新Nette代码段时，DataTables元素(页面、顺序等)都被删除了。如果页面被刷新，这些元素将返回。我使用的是Nette Framework 2.3和Doctrine 2。

Answer 1

DataTable是从$(document).ready()事件上的HTML创建的，该事件在页面加载时发生。如果在未刷新网页的情况下刷新代码段，则DataTable将丢失，并且不会重新创建，因为该事件未再次触发。您需要做的是在处理代码片段刷新的代码末尾添加一个新的$('.table').DataTables();调用(我不熟悉nette，所以我不确定具体发生在哪里)。