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 создан из HTML на событии $(document).ready(), которое происходит, когда страница загружается. Если вы обновите фрагмент без обновления веб-страницы, DataTable будет потерян, и он не будет воссоздан, так как это событие еще не было запущено. Что вам нужно сделать, это добавить новый вызов $('.table').DataTables(); в конце кода, который обрабатывает обновление фрагмента (я не знаком с nette, поэтому я не уверен точно, где это произойдет).