Bootstrap tablesorter on php echo output - php

Question

I using tablesorter in twitter-bootstrap. This works fine when using like this:
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped tablesorter">
<thead>
<tr>
<th>Brugernavn <i class="fa fa-sort"></i></th>
<th>Rolle <i class="fa fa-sort"></i></th>
<th>Oprettet <i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<tr>
<td>3326</td>
<td>10/21/2013</td>
<td>3:29 PM</td>
</tr>
<tr>
<td>3325</td>
<td>10/21/2013</td>
<td>3:20 PM</td>
</tr>
<tr>
<td>3324</td>
<td>10/21/2013</td>
<td>3:03 PM</td>
</tr>
<tr>
<td>3323</td>
<td>10/21/2013</td>
<td>3:00 PM</td>
</tr>
<tr>
<td>3322</td>
<td>10/21/2013</td>
<td>2:49 PM</td>
</tr>
</tbody>
</table>
This works and my Console shows:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery-1.10.2.js:5
Evaling expression:var sortWrapper = function(a,b) {var e0 = (a[0] === null && b[0] === null) ? 0 :(a[0] === null ? Number.POSITIVE_INFINITY : (b[0] === null ? Number.NEGATIVE_INFINITY : a[0] - b[0]));if(e0) { return e0; } else { return a[4]-b[4];}; return 0; }; ,0ms jquery.tablesorter.js:147
Sorting on 0,0 and dir 0 time:,1ms jquery.tablesorter.js:147
Rebuilt table:,0ms
But when I use data from my Mysql database and loop through, it does not work.
I do it like this:
<table class="table table-bordered table-hover table-striped tablesorter">
<thead>
<tr>
<th>Brugernavn <i class="fa fa-sort"></i></th>
<th>Rolle <i class="fa fa-sort"></i></th>
<th>Oprettet <i class="fa fa-sort"></i></th>
</tr>
</thead>
<?php
foreach ($users as $key => $value) {
?>
<tbody>
<tr data-id="<?php echo $value['user'];?>" data-toggle="modal" data-target="#edit" class="open-edit">
<td data-id="username" class="username-edit"><?php echo $value['user'];?></td>
<td class="username-edit" data-id="role"><?php echo $value['role'];?></td>
<td><?php echo $value['lastlogin'];?></td>
</tbody>
<?php
}
?>
</table>
The data gets show correct but when I click the sort button nothing happends. The Console shows:
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery-1.10.2.js:5
Evaling expression:var sortWrapper = function(a,b) {var e0 = (a[0] == b[0] ? 0 : (a[0] === null ? Number.POSITIVE_INFINITY : (b[0] === null ? Number.NEGATIVE_INFINITY : (a[0] < b[0]) ? -1 : 1 )));if(e0) { return e0; } else { return a[3]-b[3];}; return 0; }; ,0ms jquery.tablesorter.js:147
Sorting on 0,0 and dir 0 time:,1ms jquery.tablesorter.js:147
Rebuilt table:,0ms
Can anyone help me understand why the sort function does not work when using my php loop?

Answer 1

I solved it. I needed to keep <tbody></tbody> outside the loop like this:
<div class="table-responsive">
<table class="table table-bordered table-hover table-striped tablesorter">
<thead>
<tr>
<th>Brugernavn <i class="fa fa-sort"></i></th>
<th>Rolle <i class="fa fa-sort"></i></th>
<th>Oprettet <i class="fa fa-sort"></i></th>
</tr>
</thead>
<tbody>
<?php
foreach ($users as $key => $value) {
?>
<tr data-id="<?php echo $value['user'];?>" data-toggle="modal" data-target="#edit" class="open-edit">
<td data-id="username" class="username-edit"><?php echo $value['user'];?></td>
<td class="username-edit" data-id="role"><?php echo $value['role'];?></td>
<td><?php echo $value['lastlogin'];?></td>
<?php
}
?>
</tbody>
</table>