Row Reordering plugin with Drag'n'Drop capabilities is released

Row Reordering plugin with Drag'n'Drop capabilities is released

I'm happy to announce that I have crated another add-on for the DataTables plugin - row reordering. This add-on enables you to reorder rows in the DataTable using Drag'n'Drop. Plugin is placed on http://jquery-datatables-row-reordering.googlecode.com/svn/trunk/index.html . You can find documentation on the wiki pages http://code.google.com/p/jquery-datatables-row-reordering/wiki/Index and live examples on http://jquery-datatables-row-reordering.googlecode.com/svn/trunk/index.html .

I have tested it in various cases and it works fine for me. I hope that you will find it useful too.

Best Regards,
Jovan

Replies

In terms of implementation, this disabled the sorting on the table - I completely see the need for that since that would override your custom ordering. I wonder if it would be worth disabling sorting (bSortable) on all columns with the exception of your master sorting column (which presumably could be hidden if someone didn't want the index column to be visible).

Thanks, I'm glad that you like it. I have tried to allow sorting of index column but I had some inconsistencies in determining a new row position in asc/desc cases.
I have assumed that this column will either be sorted in ascending order or even hidden, therefore this version put it in the fixed columns and disable any sorting. If anyone need descending sorting I will resolve this in the future version.

Is it possible to lock down some rows so they cannot be dragged? Ideally, I'd like to have enabled (draggable) rows at the top of the table and (disabled) rows at the bottom with the option to toggle that ability dynamically.

One suggestion I'd like to make is to put together a set of very simple, downloadable examples. Your documentation states that each row must have an ID, and that one column must be used for indexing. The page source for the live examples shows a: data-position="1" attribute for the rows (and also has the "id"), which is not addressed in the documentation. Is this necessary? The index column defaults to the first column. How is this changed, and can it also be hidden?

I think your plugin is plain awesome - I'd just like to request some expansion on the setup docs when you have time.

Hi,
great plugin!
Some comments:
- The values get somehow crazy when they are not correlative, i.e. 1, 3, 6, 7. It'd be great to know the expected outcome - since this algorithm has to be replicated in server-side to keep order too.
- It would also be great to be able to user-define the sorting function.

I like the plugin, works on client-side, but I couldn't find the server-side code of UpdateRowOrder.php... So far I use this plugin in codeigniter and tried several times. Here is how my queries look like (2 queries):

and the row we move:
UPDATE `table_name` SET `order_field` = '{$to}' WHERE `id` = '{$id}';

Ignore the syntax, I use a db class in codeigniter and looks different, but I want to know the idea, where am I mistaking. It updates the row (the one we move) and it either sets the previous or next ones with the same value or even 0 in the `order_field`. Any suggestions would be appreciated.

I just want to say that this is a great plugin that has saved my days of my life recreating this functionality. Thank you!

On the other hand the documentation on this plugin is terrible. I'm sorry but it really is lacking. This puts up a barrier for less experienced programmers as they cant figure out how to debug their issues. Please start a Wiki or something to build on the docs for this great plugin.

The real reason I'm posting is to answer someones question about disabling the drag and drop on certain rows. In my situation I have a datatable with detail rows (click a button and details about that row open up under it). The default setting for row sorting made this new row sortable too which was not what I wanted.

So to fix this I use the following JQuery to disable all sorting (on ALL rows) when I click the button to view details:

$("tbody", "table#" + self.formIdentifier).sortable("disable");

Then when I click on the close button for the details I re enable the sorting for the datatable:

@racheld i couldnt agree with you more about how terrible the documentation is, and how the source code trunk/download does not contain the most important piece needed for server-side implementations UpdateRowORder.php

The author did also do this in .NET, but i couldnt figure out the source
http://www.codeproject.com/Articles/331986/Table-Row-Drag-and-Drop-in-ASP-NET-MVC-JQuery-Data

The plugin is functional, but as stated above, examples would be helpful. One little quirk I ran into was that when using an iPad, if I had a button in a row, the button never gets activated because the row thinks it's being moved. Is there a way to exclude columns from initiating a drag/drop?

Now, for some reason, the fromPosition parameter is an array, and in this case, unnecessary - i've worked around it.
But then, toPosition parameter isn't the position or <tr> index - the real spot where you want to drag your selected item. It is the id attribute of the target, or the <tr> tag that has to move away from your draggable object.
Last, forget the portuguese words, translate 'ordem' to 'order' and $contador to $counter or something and you will be just fine.

Nice work Jovan, great plugin.
I 'm trying to implement it on my project, using server side code which is made by panik. My question is, which parameters need to pass from client side if I use above panik's code.