homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Sortable Table Rows with Jquery UI
Working but want to develop a little more

Msg#: 4462843 posted 8:30 am on Jun 8, 2012 (gmt 0)


I've created a simple transport diary system and thought being able to drag jobs (rows) would give the user ability to arrange what order they are displayed in. The data comes from a MySQL database.

Here's a sample of the HTML code:

<table cellpadding="0" cellspacing="0" id="data">
<tr class="ui-state-disabled">
<td><h3><?php if (mysql_num_rows($result1) > 0) { echo "<a href=\"daily.php?vehicle=1&amp;date=$date\">Skip Wagon</a>"; } else { echo "Skip Wagon"; } ?></h3></td>
<td class="w80">&nbsp;</td>
<td class="w200">&nbsp;</td>
<td class="w250">&nbsp;</td>
if (mysql_num_rows($result1) == 0) {
echo "<tr class=\"ui-state-disabled\"><td></td><td colspan=\"3\" class=\"nodata\">No Jobs</td></tr>";
} else {
while($row=mysql_fetch_array($result1)) {
$jobid = $row['diary_id'];
$type = $row['diary_type'];
$status = $row['diary_status'];
<tr id="job_<?php echo $jobid; ?>" <?php if ($status == 1) echo "class=\"complete\""; else if ($status == 2) echo "class=\"inprogress\""; else echo "class=\"incomplete\"";?> onclick="location.href='job.php?id=<?php echo $jobid; ?>'">
<td class="whitebg"></td>
<td><?php echo $type; ?></td>
<td><?php echo $row['diary_name']; ?></td>
<td><?php echo $row['diary_details']; ?></td>
<?php }} ?>

Here's the Jquery code I've got so far to make the rows sortable

<script type='text/javascript'>
$(document).ready(function() {
var fixHelper = function(e, ui) {
ui.children().each(function() {
return ui;

$("#data tbody").sortable({
items: 'tr:not(.ui-state-disabled)',
cursor: 'crosshair',
//Placeholder doesn't currently work
placeholder: "ui-state-highlight",
helper: fixHelper

What I'd like to achieve is once a row has been dragged to a new position, it be stored in the database. I'll need to add a column "order" or something to the table.

Hopefully someone can point me in the right direction.




Msg#: 4462843 posted 11:58 am on Jun 11, 2012 (gmt 0)

I've been working and working on this and finally have got somewhere.

I've created a jsFiddle so you can see how it works - [jsfiddle.net...]

I've got the database side of it working aswell now. I would still like to develop this a little more though.

If you try and move "Platinum Autos" to the Flat Bed, it won't let you, however you can move it to the Truck.

Another thing is the order array, I'll try my best to explain this. When you move a row it updates the table and for now shows the array of what's been posted.


[0] => 3141
[1] => 3138
[2] => 3052
[3] => 3142

The ordering is wrong really, although it does work. The ordering should be per vehicle, not the entire table.

One more thing, I'd like to be able to drag a row to a different vehicle and for it then to update the database with what vehicle it's been assigned too.

I hope I've explained this well enough and the jsFiddle demo helps.


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4462843 posted 5:26 am on Jun 14, 2012 (gmt 0)

consider including all tr's in sortable

items: 'tr',

instead of 'No Items' row include count in heading tr's
eg truck nn items, update nn after each move.


Msg#: 4462843 posted 6:14 pm on Jun 18, 2012 (gmt 0)

I could remove the disable sort for the "No Jobs" rows which would then mean I could drag rows to where there are no jobs already. The only downside to this is someone could drag no jobs which isn't supposed to happen.

I don't understand the later part, count in heading tr's etc. Could you elaborate please?


WebmasterWorld Senior Member 5+ Year Member

Msg#: 4462843 posted 12:05 am on Jun 19, 2012 (gmt 0)


Truck - 3 Jobs
- Job A
- Job B
- Job C
Van - No Jobs
Ute - 1 Job
- Job D

Easier than adding and removing 'No Job' Lines, and handling moves in error. Changing the 'number of jobs' text is easier task.

The 'van' and 'ute' lines need to be movable for this single table approach to work, problem or feature ?

If truck, van, ute need to stay in order, then each needs probably needs own table.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved