1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 3:41 am May 21, 2026

Forum Moderators: open

Message Too Old, No Replies

Sortable Table Rows with Jquery UI

Working but want to develop a little more

         

LinusIT

8:30 am on Jun 8, 2012 (gmt 0)

10+ Year Member



Hi

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">
<tbody>
<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>
</tr>
<?php
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>
</tr>
<?php }} ?>
</tbody>
</table>


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() {
$(this).width($(this).width());
});
return ui;
};

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


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.

Thanks

LinusIT

11:58 am on Jun 11, 2012 (gmt 0)

10+ Year Member



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.

Example:

Array
(
[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.

daveVk

5:26 am on Jun 14, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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.

LinusIT

6:14 pm on Jun 18, 2012 (gmt 0)

10+ Year Member



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?

daveVk

12:05 am on Jun 19, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Consider

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.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 3:41 am May 21, 2026