I posted a drag and drop example of sorting and saving a list using the jQuery sortables plugin. I was asked how this could be done with table rows. The jQuery TableDnD plugin comes to the rescue!
It doesn’t have serialize method so you need to get the new order yourself which can be done easily by looping through the rows and building a list in the correct order.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="js/jquery.tablednd.js"></script>
<script type="text/javascript">
<!-- <![CDATA[
$(function(){
$("#sortable-tbl").tableDnD();
$('#frm-sort').submit(function(){
var sRowOrder = "";
$("#sortable-tbl tr").each(function(i,o){
if (sRowOrder.length) {
sRowOrder += "," + o.id;
} else {
sRowOrder = o.id;
}
});
$('#sort_order').val(sRowOrder);
});
});
// ]]> -->
</script>
</head>
<body>
<table id="sortable-tbl">
<tr id="section_id_1">
<td>One</td>
<td>Row A</td>
</tr>
<tr id="section_id_2">
<td>Two</td>
<td>Row B</td>
</tr>
<tr id="section_id_3">
<td>Three</td>
<td>Row C</td>
</tr>
<tr id="section_id_4">
<td>Four</td>
<td>Row D</td>
</tr>
</table>
<form id="frm-sort">
<input type="submit" name="save" id="save" value="save" />
<input type="hidden" name="sort_order" id="sort_order" value="" />
</form>
</body>
</html>
* UPDATE *
Someone asked how to update the database using ColdFusion, so here is the code:
<!--- strip the 'section_id_' from the list, so that we only have a list of ids --->
<cfset form.sort_order = ReplaceNoCase(form.sort_order, "section_id_", "", "all") />
<cfloop from="1" to="#ListLen(form.sort_order)#" index="ndx">
<cfquery name="qryOrder" datasource="#Request.Datasource#">
update [Sections] set
section_order = <cfqueryparam value="#ndx#" cfsqltype="cf_sql_integer" />
where section_id = <cfqueryparam value="#ListGetAt(form.sort_order, ndx)#" cfsqltype="cf_sql_integer" />
</cfquery>
</cfloop>
Rick
Comment by Rick Faircloth – March 18, 2008
Comment by Ryan – March 24, 2009
There is a "onDrop" method of the tableDnD plugin which you can use:
$("#sortable-tbl").tableDnD({
onDrop: function(table, row) {
// do something here
}
});
There is more info in this post:
www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
Comment by John Whish – March 25, 2009
Since you originally posted, the plugin's been improved a bit and there's now a built-in serialize function. To expand a bit on your answer to Ryan, here's how you might use it and then post the result to the server via ajax (avoiding the need for a manual submission form):
$("#sortable-tbl").tableDnD({
onDrop: function(table, row) {
var newOrder = $(table).tableDnDSerialize();
$.ajax({
url:"UrlOfMyFormProcessor.cfm"
,type:"POST"
,data:newOrder
});
}
});
Also, there's no need to parse out the IDs on the server. The serialize function will do this for you as long as you use a hyphen before the ID value. So instead of naming your table row IDs:
section_id_1
etc, name them:
section_id-1
and the serialise function will return just "1" without "section_id-", so that ColdFusion will get a list of just the ID values.
Comment by Julian Halliwell – March 27, 2009
Comment by John Whish – March 27, 2009
Element SORT_ORDER is undefined in FORM.
<html>
<head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tablednd_0_5.js"></script>
<script type="text/javascript">
<!-- <![CDATA[
$(function(){
$("#sortable-tbl").tableDnD();
$('#frm-sort').submit(function(){
var sRowOrder = "";
$("#sortable-tbl tr").each(function(i,o){
if (sRowOrder.length) {
sRowOrder += "," + o.id;
} else {
sRowOrder = o.id;
}
});
$('#sort_order').val(sRowOrder);
});
});
// ]]> -->
</script>
</head>
<body>
<cfquery name="getSplashInfo" datasource="DMC">
select * from splash_order
order by splash_ordinal asc
</cfquery>
<cfoutput>
<table id="sortable-tbl">
<cfloop query="getSplashInfo">
<tr id="splash_items_id_#getSplashInfo.splash_items_id#">
<td>#getSplashInfo.splash_name#</td>
<td>#getSplashInfo.splash_ordinal#</td>
</tr>
</cfloop>
</table>
</cfoutput>
<form id="frm-sort">
<input type="submit" name="save" id="save" value="save" />
<input type="hidden" name="sort_order" id="sort_order" value="" />
</form>
<!--- strip the 'section_id_' from the list, so that we only have a list of ids --->
<cfset form.sort_order = ReplaceNoCase(form.sort_order, "section_id_", "", "all") />
<cfloop from="1" to="#ListLen(form.sort_order)#" index="ndx">
<cfquery name="qryOrder" datasource="DMC">
update splash_Order
set splash_ordinal = <cfqueryparam value="#ndx#" cfsqltype="cf_sql_integer" />
where splash_items_id = <cfqueryparam value="#ListGetAt(form.sort_order, ndx)#" cfsqltype="cf_sql_integer" />
</cfquery>
</cfloop>
</body>
</html>
Comment by Justin – July 26, 2010
Comment by John Whish – August 17, 2010