3

I have problem with DataTables working alongside Nette.

My JavaScript code:

$(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}

It normally works, but when the Nette snippet is refreshed, DataTables elements (pages, order, etc.) are removed. If the page is refreshed, these elements return. I am using Nette Framework 2.3 and Doctrine 2.

Chris H.
  • 2,544
  • 19
  • 32
ondrusu
  • 97
  • 4

1 Answers1

3

The DataTable is created from the HTML on the $(document).ready() event, which happens when the page is loaded. If you refresh the snippet without refreshing the webpage, the DataTable is lost, and it doesn't get re-created since that event hasn't been triggered again. What you need to do is add a new $('.table').DataTables(); call at the end of the code that handles the refresh of the snippet (I'm not familiar with nette so I'm not sure exactly where that would occur).

Chris H.
  • 2,544
  • 19
  • 32
  • Yes, I tried it and it's working, but I would like, if I add new row to table and re-created DataTables, It remember my choice, which set (incl. set page) – ondrusu Jul 20 '16 at 20:13
  • @ondrusu The issue with that is that you're creating a DataTable from an HTML table, and then refreshing the HTML table. If you were AJAX sourcing your data this would be easy to do, but since DataTables gets your data from the HTML, you won't be able to add a new row to DataTables and refresh the HTML. You'll have to add rows directly to HTML, which means you can't use DataTables `.add()` method to add rows. – Chris H. Jul 20 '16 at 20:53
  • OK thank you very much. It´s true, maybe it is on new question, but what a plugin would I use for "DataGrid" - sorting, paging, my filter for Nette and Doctrine 2? I found [data-grid](http://grid.mesour.com/version2/basic/without-settings/) . – ondrusu Jul 23 '16 at 13:21