Cross-Browser, User-Sorted Tables with jQuery
Posted on Apr 23, 2009
jQuery UI offers a sortable interaction that makes it very simple to make anything (usually a list) sortable (perhaps reorderable is a better term) by the user. Under many circumstances this can be achieved with a single line of JavaScript code (see below). On occassion you may want to allow a user to reorder the contents of a table rather than a list. This also takes only one line of code, except if you want this to work properly in the dreaded IE browser. This post will cover how to fix the rendering issue you get in Internet Explorer when reordering table rows.
Generally speaking, IE has a quirk when rendering tables whereby it will ignore empty table elements (at least that is my experience). This causes an issue because as you reorder a table row using jQuery UI, jQuery will add in a "helper" element into the DOM to show the drop position in the table (you can see this at work on list elements in the sortable demo for placeholders). Since jQuery inserts an empty TR element, IE simply seems to ignore it, meaning the location you are going to drop the element is not obvious to the user.
Thankfully there is a quick fix to this issue (full code example below). You can watch the "change" event that is fired every time the element is dragged and the position in the DOM changes. Since, when specifying a placeholder, we give the placeholder TR a special style class, we can then inject content into that row, ensuring that it renders in IE.
As you can see in the full code below, when I create my sortable (reorderable) table I tell it to add a special class of "ui-state-highlight" to the TR tag for the placeholder (also note, since this is a table and the data can only move up and down, I make it fixed to the y axis). I have also told the change event to call my forceHelper() method when the "change" event is fired. My forceHelper() method only has one line of code, which looks for the special placeholder class and injects a TD tag into it with a non-breaking-space to ensure that IE renders it.
That's all that is needed to force your placeholder to show in IE. Hopefully that saves someone from digging into this issue too much as I had to.
<html>
<head>
<title>Cross-browser, User-sorted Tables with JQuery</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
<style type="text/css">
.ui-state-highlight {
height: 1.5em;
line-height: 1.2em;
}
#sortable-users tr {
cursor:default;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
function init() {
$("#sortable-users").sortable({
placeholder: 'ui-state-highlight',
axis: 'y',
change: function(e, ui) {
forceHelper(e,ui);
}
});
$("#sortable-users").disableSelection();
}
function forceHelper(e,ui) {
$(".ui-state-highlight").html("<td colspan='100%'>&nbsp;</td>");
}
$(document).ready(init);
</script>
</head>
<body>
<table>
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Twitter Username</th>
</thead>
<tbody id="sortable-users">
<tr>
<td>Brian</td>
<td>Rinaldi</td>
<td>remotesynth</td>
</tr>
<tr>
<td>Ray</td>
<td>Camden</td>
<td>cfjedimaster</td>
</tr>
<tr>
<td>Peter</td>
<td>Bell</td>
<td>peterbell</td>
</tr>
<tr>
<td>Ben</td>
<td>Forta</td>
<td>benforta</td>
</tr>
</tbody>
</table>
</body>
</html>
Comments
http://www.aliaspooryorik.com/blog/index.cfm/e/posts.details/post/sorting-table-rows-with-jquery-and-coldfusion-28
Posted By Julian Halliwell / Posted on 04/27/2009 at 2:24 AM
http://www.datatables.net
Posted By xxx / Posted on 05/04/2009 at 4:34 PM
thank you very much to help me.
Posted By tuffkid / Posted on 03/16/2010 at 1:28 AM