So I'm trying to create a simple datatables project without the usage of their Server-side processing. I included the css, js and everything but still can't get it to work. This is what my code looks like:
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>
And in my 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');
}
});
Includes:
$(document).ready(function() {
$('#dataTableUsers').dataTable();
} );
</script>
<link href="/assets/css/jquery.dataTables.css" rel="stylesheet">
<script src="/assets/js/jquery.dataTables.js"></script>
BTW, I am using slim framework and twig. I get all the data but can't get the datatables to work. The sorting, search and everything. I think I got the css design but I can't get the main datatables functions to work.
How can I make the datatables work without using their Server-side processing?
The code isn't working because of the positioning of my loop. The new html file now looks like this:
<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>
Before, my </tbody>
tag is above my </tr>
which is wrong. And I also moved the {% enfor %}
below my </tr>
tag. And now it does work.