Archive for June, 2008

While making a e commerce application I wanted the ability to easily sort product and categories by click and drag. Basically to allow the customer to re-order the way their products and categories are displayed. No doubt that you’ve seen application that have numerous “move up” and “move down” buttons that seem to take forever to use and from development point of view cumbersome to do. Of course the other method is to have input boxes with numbers in that can be altered, again cumbersome for both user and designer.

Being a massive fan of jQuery I thought there must a easy ‘drag and drop’ solution. I regular use the interface plugins that covers most of my needs. Though they provide a ‘sortable’ plugin that works great for divs, it simply cannot sort tables due to the fact that certain CSS styles (like position static) cannot be applied to table rows.

After a long search I eventually came across a plugin solution called ‘Table Drag and Drop’. This simple plugin like all jQuery requires just a small amount of code to get it working.

$(document).ready(function() {
        $("#mytable").tableDnD();
});

To apply to a basic table like this:

<table id="mytable" border="1">
<tbody>
<tr id="product_1">
<td>My Product 1</td>
<td>£10.00</td>
<td>Active</td>
</tr>
<tr id="product_2">
<td>My Product 2</td>
<td>£2.99</td>
<td>Not active</td>
</tr>
<tr id="product_3">
<td>My Product 3</td>
<td>£23.49</td>
<td>Not active</td>
</tr>
<tr id="product_4">
<td>My Product 4</td>
<td>£19.99</td>
<td>Active</td>
</tr>
<tr id="product_5">
<td>My Product 5</td>
<td>£7.99</td>
<td>Not active</td>
</tr>
</tbody></table>

This will give you the following results like this (try dragging the rows):

I’ve had success with this with the most complicated tables with embeded forms, complex CSS styling and 100+ rows without problems. The plugin includes various settings to assign different classes when dragging to get a user friendly feel.

Now you probably wondering how you can now get this ordering information back to the web sever to save it in the database. Database storage is simple, use a attribute storing a int and simply update the table in the order which they are received. It has a call back function called serialize(). This is an array with containing the id’s of the table rows in the new order in the table. Just loop these values update the table.

This code uses simple table with some CSS styling and POST an array back to a web sever with the new order.

$(document).ready(function() {
	$('#mytable2').tableDnD({
                onDragClass: "dragrow",
		onDrop: function(table, row) {
                // get the serialized data for transport
		serial = $.tableDnD.serialize();
                       // use jQuery ajax function to send information
			$.ajax({
				type: "POST",
				url: "inc/product_controller_ajax.php",
				data: serial,
			});
		}
	});
});

#mytable2 {
border: 2px solid black;
border-collapse: collapse;
width: 50%;
}
.row1 {
background-color: #d8dff4;
}
.row2 {
background-color: #f7e8e9;
}
.dragrow {
background-color: #a70707;
color: #ffffff;
}

Now at the sever side all you have to do is loop through the value sent via ajax. I have used POST in this example. The name of the value is the ID of the table, so for example a PHP solution for this is as follows:

1
2
3
4
5

<?php
    foreach($_POST['mytable2'] as $line){
       echo $line; // product_2, product_2... etc in new order
    }
?>

Links

Table Drag and Drop Web site

Download Table Drag and Drop (Local copy version 0.4)

jQuery (required)