Sortable (Drag & Drop) Table Rows
OK, here’s the problem. I need an easy way to sort table rows for my new mini site at www.BigBangHosts.com (on the admin side). I normally use script.aculo.us for my DHTML & Ajax needs, but in this case I couldn’t find what I needed. I wanted and easy way to sort table rows and store the new sorting in the database. This would easily allow me to change the rankings of various hosts in my admin control panel.
Option 1 was to create a separate page just for sorting. This way I could use a list. The reason I didn’t like this options was because I would not be able to see all the features of each host at a glance as I could with a table.
Digging deep into the Google results I found this demo script that was simply awesome. In order to get it to work for my needs I did the following:
- Viewed the source and got the javascript that did the sorting work.
- Downloaded dhtmlapi.js from www.howtocreate.co.uk
- Added a kludgey hack at the end of the stopDrop() function to post the new order to a php script
- Used PHP to write to the database.
The result allows me to drag and drop and everything is seamlessly saved!
Kludgey Hack =
var getstr = "";
for( var i = 0, x = theTable.getElementsByTagName('tr'); x[i]; i++ ) {
getstr += x[i].id;
}
var runscript = new Image();
runscript.src = 'sortrank.php?order='+getstr;
PHP Snippet (table row had id values of “id{row_id}”)=
$order = split('id', $_GET['order']);
array_shift($order);
foreach ($order as $val) {
$sql = "update hosts set rank=".++$rank." where id=$val;";
query($sql);
}
Special thanks to Mark Wilton-Jones for doing virtually all the work for me.
No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.
July 2, 2007
Posted in: Programming & Internet
5 Responses
Thanks for this, it was very helpful. I wish scriptaculous would release a better version that dealt with sorting tables…
hello,
Its really great script to work on.
I m trying to include this into my project but i m not getting how to store sort order in database.
I m using this in cakephp.
Can you please explain with code?
The PHP Snippet in this post is all the code I’m using to update the database.
Here it is with comments…
// create an array containing the new order passed in
$order = split(‘id’, $_GET['order']);
// drop the first item in the array since it is garbage
array_shift($order);
// loop through each item in the order array
foreach ($order as $val) {
// create and execute query to update the “rank” or order of the host
$sql = “UPDATE hosts SET rank=”.++$rank.” WHERE id=$val;”;
mysql_query($sql);
}
Hello Dustin,
Thanks for your reply n code.
I got it working…
mad props to you brother.
the scriptaculous implementation of this behaviour for tables is buggy at best, and doesnt work worth a damn in internet exploder.
your code works like a champ.
many many thanks to you and Mark Wilton-Jones, job very well done.
Comments are closed for this entry.