I am trying to use a sortable table for data I get for my database. Unfortunately I can't get it to work. When I populate the table manually with static data sorting is working perfectly. I am using HTML Kickstart Framework. The code from HTML Kickstart:
Javacript:
/*---------------------------------
Table Sort
-----------------------------------*/
// init
var aAsc = [];
$('table.sortable').each(function(){
$(this).find('thead th').each(function(index){$(this).attr('rel', index);});
$(this).find('th,td').each(function(){$(this).attr('value', $(this).text());});
});
// table click
$(document).on('click', 'table.sortable thead th', function(e){
// update arrow icon
$(this).parents('table.sortable').find('span.arrow').remove();
$(this).append('<span class="arrow"></span>');
// sort direction
var nr = $(this).attr('rel');
aAsc[nr] = aAsc[nr]=='asc'?'desc':'asc';
if(aAsc[nr] == 'desc'){ $(this).find('span.arrow').addClass('up'); }
// sort rows
var rows = $(this).parents('table.sortable').find('tbody tr');
rows.tsort('td:eq('+nr+')',{order:aAsc[nr],attr:'value'});
// fix row classes
rows.removeClass('alt first last');
var table = $(this).parents('table.sortable');
table.find('tr:even').addClass('alt');
table.find('tr:first').addClass('first');
table.find('tr:last').addClass('last');
});
CSS:
/*---------------------------------
TABLES
-----------------------------------*/
table{width:100%;margin:0 0 10px 0;text-align:left;border-collapse: collapse;}
thead, tbody{margin:0;padding:0;}
th, td{padding:7px 10px;font-size:0.9em;border-bottom:1px dotted #ddd;text-align:left;}
thead th{font-size:0.9em;padding:3px 10px;border-bottom:1px solid #ddd;}
tbody tr.last th,
tbody tr.last td{border-bottom:0;}
/* striped */
table.striped{}
table.striped tr.alt{background:#f5f5f5;}
table.striped thead th{background:#fff;}
table.striped tbody th{background:#f5f5f5;text-align:right;padding-right:15px;border-right:1px dotted #e5e5e5;}
table.striped tbody tr.alt th{background:#efefef;}
/* tight */
table.tight{}
table.tight th, .tight td{padding:2px 10px;}
/* sortable */
table.sortable{border:1px solid #ddd;}
table.sortable thead th{cursor: pointer;position:relative;top:0;left:0;border-right:1px solid #ddd;}
table.sortable thead th:hover{background:#efefef;}
table.sortable span.arrow{border-style:solid;border-width:5px;
display:block;position:absolute;top:50%;right:5px;font-size:0;
border-color:#ccc transparent transparent transparent;
line-height:0;height:0;width:0;margin-top:-2px;}
table.sortable span.arrow.up{border-color:transparent transparent #ccc transparent;margin-top:-7px;}
and my php page:
<!DOCTYPE html>
<html><head>
<title>HTML KickStart Elements</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="" />
<meta name="copyright" content="" />
<link rel="stylesheet" type="text/css" href="css/kickstart.css" media="all" /> <!-- KICKSTART -->
<link rel="stylesheet" type="text/css" href="style.css" media="all" /> <!-- CUSTOM STYLES -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/kickstart.js"></script>
<!-- KICKSTART -->
</head>
<body>
<?php include "header.php";
$q_for_group_admin = "SELECT c.name AS 'group_name', u.display_name AS 'display_name', u.username AS 'username' FROM circle c INNER JOIN user u ON c.admin_id = u.user_id";
if (!$result1 = mysqli_query($con, $q_for_group_admin)) {
exit($con->error);
}
?>
<div class="grid">
<div class"col_12">
<table class="sortable" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>Username</th>
<th>Display Name</th>
<th>Group</th>
<th>Actions</th>
</tr>
</thead>
<?php
while ($row = mysqli_fetch_assoc($result1)):
?>
<tbody>
<tr>
<td><?php echo $row['username']; ?></td>
<td><?php echo $row['display_name']; ?></td>
<td><?php echo $row['group_name']; ?></td>
<td><a href="<?php echo BASE_PATH . '/delete_user.php?user_id=' . $row['user_id']; ?>" >Delete</a></td>
</tr>
<?php
endwhile;
?>
</tbody>
</table>
</div>
<div class="col_12">
<table class="sortable" cellspacing="0" cellpadding="0">
<thead><tr>
<th>Name</th>
<th>Number</th>
<th>Color</th>
<th>Actions</th>
</tr></thead>
<tbody><tr>
<td>Joshua</td>
<td>555-4325</td>
<td>Blue</td>
<td><a href=""><i class="icon-pencil"></i></a>
<a href=""><i class="icon-minus-sign"></i></a></td>
</tr><tr>
<td>Peter</td>
<td>555-5698</td>
<td>Gold</td>
<td><a href=""><i class="icon-pencil"></i></a>
<a href=""><i class="icon-minus-sign"></i></a></td>
</tr><tr>
<td>Mary</td>
<td>666-7654</td>
<td>Red</td>
<td><a href=""><i class="icon-pencil"></i></a>
<a href=""><i class="icon-minus-sign"></i></a></td>
</tr><tr>
<td>Star</td>
<td>555-6732</td>
<td>Pink</td>
<td><a href=""><i class="icon-pencil"></i></a>
<a href=""><i class="icon-minus-sign"></i></a></td>
</tr></tbody>
</table>
</div>
</div>
</body>
</html>
The second table in the above code is working OK, but not the first where data comes from the sql query.
Thank you
