Hi james182,
I have changed your code a bit,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test list sort</title>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready( function () {
$('table tbody a.control').live('click', function (e) {
e.preventDefault();
var tr = $(this); // Start with this link and work upwards from there, this allows the TR element itself to be the control if desired
var iterations = 0;
while(tr.attr('tagName') != 'TR')
{
tr = tr.parent();
iterations += 1;
if (iterations == 100) {
return false; // Bail out, surely something is wrong or there is lots and lots of html in there
}
}
if ($(this).attr('rel') == 'up' && tr.prev().length)
tr.fadeTo('medium', 0.1, function () {
tr.insertBefore(tr.prev()).fadeTo('fast', 1);
// If you want to do any more to the table after the move put it here, I am running the reorder function (defined below)
reorder();
});
else if ($(this).attr('rel') == 'down' && tr.next().length)
// Same as above only this is for moving elements down instead of up
tr.fadeTo('fast', 0.1, function () {
tr.insertAfter(tr.next()).fadeTo('fast', 1);
// If you want to do any more to the table after the move put it here, I am running the reorder function (defined below)
reorder();
});
else
//Can't do anything with these
return false;
return false;
});
function reorder () {
var position = 1;
var order = '';
$('table.sort tbody tr').each(function () {
hiddenfield = $('td:eq(1) .items', $(this));
// Change the text of the first TD element inside this TR
$('td:first', $(this)).text(position);
//Now remove current row class and add the correct one
$(this).removeClass('row1 row2').addClass( position % 2 ? 'row1' : 'row2');
position += 1;
if(hiddenfield.length)
{
order += order == '' ? hiddenfield.val() : '+'+hiddenfield.val()
}
$('#itemOrder').val(order);
});
}
});
</script>
</head>
<body>
<form id="form1" method="post" action="">
<table border="1" width="100%" class="sort">
<thead>
<tr>
<th>Position</th>
<th>Name</th>
<th>Controls</th>
</tr>
</thead>
<tbody>
<?php
$con = mysql_connect("localhost", "*******", "*********") or die(mysql_error());
mysql_select_db("my_test", $con) or die(mysql_error());
$sql = "SELECT * FROM tbl_items ORDER BY item_order ASC";
$result = mysql_query($sql);
$i = 1;
while($r = mysql_fetch_assoc($result))
{
?>
<tr class="<?php echo $i ?>">
<td><?php echo $i ?></td>
<td><?php echo $r['item_name']; ?>
<input name="itemid_<?php echo $r['id']; ?>" type="hidden" class="items" value="<?php echo $r['id']; ?>" /></td>
<td><a href="#up" rel="up" class="control">Up</a> <a href="#down" rel="down" class="control">Down</a></td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
<table border="1" width="100%">
<tr>
<td><input name="itemOrder" id="itemOrder" type="hidden" value="" />
<input type="button" name="cmdSubmit" value="Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
In order this to work you have to change following place,
<input name="itemid_<?php echo $r['id']; ?>" type="hidden" class="items" value="<?php echo $r['id']; ?>" />
This will hold the item ID.
Finally you will end up with the items array in the hidden field itemOrder. It is a string looks like below according to your arrangement.
itemID1+itemID2+itemID3
Pass this value to a PHP file and explode from + and u`ll get the order according to the table.
PS:
I have added class="sort" to the main sorting table to identify the sorting table. make sure to put the hidden field and any buttons inside a different table because your reorder() function is use to maintain the row numbering.
Hope this helps.
Best regards,
Niroshan
