Jquery sortable table not working with mysql query

link7722 · October 3, 2013

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

Sign In

Jquery sortable table not working with mysql query

Recommended Posts

link7722

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information