Динамические таблицы данных без использования обработки на стороне сервера

Question

Так что я пытаюсь создать простой проект datatables без использования их обработки на стороне сервера. Я включил css, js и все, но все еще не могу заставить его работать. Это то, что мой код выглядит следующим образом:

HTML:

<table id="dataTableUsers" class="display" cellspacing="0" width="100%"> 
      <thead> 
      <tr> 
       <th>Full Name</th> 
       <th>Nickname</th> 
       <th>Email</th> 
       <th>Contact</th> 
       <th>Receipt</th> 
       <th>Action</th> 
      </tr> 
      </thead> 
      <tbody> 
      {% for r in results %} 
      <tr> 
       <td>{{r.first_name}} {{r.last_name}}</td> 
       <td>{{r.nickname}}</td> 
       <td>{{r.email}}</td> 
       <td>{{r.contact}}</td> 
       <td> 
       <!--<a href="/user/receipt/{{r.accountID}}">View Receipt</a>--> 
       <a data-backdrop="true" data-toggle="modal" href="/user/receipt/{{r.accountID}}" data-target="#myModal{{r.accountID}}">View Receipt</a> 
       </td> 
       <td> 

       {% if r.status == 0 %} 
        <a href="/user/{{r.accountID}}/activate">Activate</a> 
       {% else %} 
        <a href="/user/{{r.accountID}}/deactivate">Deactivate</a> 
       {% endif %} 

       </td> 
      </tbody> 
      </tr> 
      {% endfor %} 
      </table> 

И в моем PHP:

$app->get('/user/admin/:team', function($team) use($app) { 
    $session = new \RKA\Session(); 
    if($session->logged_in) { 
     if($session->type) { 
      $db = new db(); 
      if($team == "all") { 
       $results = $db->select("accounts"); 
      } else { 
       $app->redirect('/user/admin/all'); 
      } 
      $app->render('adminpage.html', array(
       'logged_in' => $session->logged_in, 
       'type' => $session->type, 
       'results' => $results 
      )); 
     } else { 
      $app->redirect('/user/'.$session->logged_in); 
     } 
    } else { 
     $app->flash('msg', 'Please log in first.'); 
     $app->flash('type', 'danger');  
     $app->redirect('/user/login'); 
    } 
}); 

Включает:

$(document).ready(function() { 
    $('#dataTableUsers').dataTable(); 
}); 
</script> 
<link href="/assets/css/jquery.dataTables.css" rel="stylesheet"> 
<script src="/assets/js/jquery.dataTables.js"></script> 

BTW, я использую тонкие рамки и прут. Я получаю все данные, но не могу заставить эти данные работать. Сортировка, поиск и все остальное. Я думаю, что у меня есть дизайн css, но я не могу заставить основные функции datatables работать.

Как я могу заставить данные работать без использования их обработки на стороне сервера?

Answer 1

Код не работает из-за положения моего цикла. Новый HTML-файл теперь выглядит следующим образом:

<table id="dataTableUsers" class="display" cellspacing="0" width="100%"> 
      <thead> 
      <tr> 
       <th>Full Name</th> 
       <th>Nickname</th> 
       <th>Email</th> 
       <th>Contact</th> 
       <th>Receipt</th> 
       <th>Action</th> 
      </tr> 
      </thead> 
      <tbody> 
      {% for r in results %} 
      <tr> 
       <td>{{r.first_name}} {{r.last_name}}</td> 
       <td>{{r.nickname}}</td> 
       <td>{{r.email}}</td> 
       <td>{{r.contact}}</td> 
       <td> 
       <!--<a href="/user/receipt/{{r.accountID}}">View Receipt</a>--> 
       <a data-backdrop="true" data-toggle="modal" href="/user/receipt/{{r.accountID}}" data-target="#myModal{{r.accountID}}">View Receipt</a> 
       </td> 
       <td> 

       {% if r.status == 0 %} 
        <a href="/user/{{r.accountID}}/activate">Activate</a> 
       {% else %} 
        <a href="/user/{{r.accountID}}/deactivate">Deactivate</a> 
       {% endif %} 

       </td> 

      </tr> 
      {% endfor %} 
      </tbody> 
      </table> 

Раньше мой </tbody> тег выше моих </tr> что неправильно. И я также переместил {% enfor %} ниже моего тега </tr>. И теперь это работает.