Shaun Mccran

My digital playground

15
M
A
Y
2011

Combining JQuery Datatable with drag and drop functions

The datatables JQuery plugin ( http://www.datatables.net/ ) is an incredibly powerful way of displaying tabular data and allowing the user to manipulate it without leaving the current view.

The plugin already features paging and sorting, but what if you want to extend the plugin with some other non default behaviours like drag and drop? Using a previous example ( http://www.mccran.co.uk/index.cfm/2010/4/29/JQuery-Datatables-plugin-example-using-a-server-side-data-request-coldfusion ) as a starting point I thought I'd try and integrate drag and drop with the datatable object.

There is an example of the finished JQuery datatable with added drag and drop here.

I won't go into how the datatable gets the data through an AJAX request as this is handled in the article above.

Firstly add the JQuery UI JavaScript file, as this will be handling the interactions.

view plain print about
1<s/cript type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

Next we will amend the existing datatable code and add in the block below. Using the 'sortable' UI function we can specify that each row will be a draggable object. (Any DOM elements specified as 'sortable' automatically inherit the 'draggable' functions properties.)

Using the 'start' and 'update' events we can calculate the starting and ending position of our dragged object, correcting the value for zero based JavaScript Arrays. In the 'update' event I am also grabbing the table cell value as it is the record id in the example code. In this way I can pass this through to a remote CFC and amend the record in the database.

Lastly there is a simple ajax request to a data handler object, and a function to handle the response back from the object.

view plain print about
1var start;
2var end;
3
4    $("#displayData tbody").sortable({
5        cursor: "move",
6        start:function(event, ui){
7        // 0 based array, add one
8        start = ui.item.prevAll().length + 1;
9                            },
10
11        update: function(event, ui) {
12        // 0 based array, add one
13        end = ui.item.prevAll().length + 1;
14        alert('Start: ' + start + ' End: ' + end);
15        var id = ui.item.context.children[0].innerHTML;
16        alert(id);
17
18            $.getJSON('dao.cfc', {
19                method:'methodName',
20                returnFormat:'JSON',
21                name:value
22                        },
23
24            // handle the response
25            function(data){
26                if(data.intSuccess == 1){
27                // success
28                    } else {
29                // error
30                    }
31                });
32                }
33            // end of drag
34    });

In the following example I have also created two areas on the page that will accept a dragged object. One is labelled 'duplicate' the other 'delete', these have events attached to them so as to demonstrate that you could easily add graphical tools to duplicate and delete record through dragging them into these elements. Just imagine the 'delete' box as a bin.

Example JQuery datatable with added drag and drop.

TweetBacks
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
Rana Waqar's Gravatar NIce, But your layout is too difficult to read out
# Posted By Rana Waqar | 24/06/11 03:22
ertys's Gravatar Nice work! but dragged object no work in example.
# Posted By ertys | 10/10/11 15:02
Shaun McCran's Gravatar Hi,
Thanks for the comments. I can't see how it isn't working though? Can you elaborate on the issue?
# Posted By Shaun McCran | 11/10/11 02:05
Moshi's Gravatar Hi first of all thank you for sharing this solution!

I tried dragging the rows onto the two drop boxes (Duplicate and Delete) but it's quite hard to target them. Perhaps having the two boxes presented vertically would be better?

I managed to hit the target after countless tries and although I saw the notification (delete or duplicate), it doesn't seem to work.

Perhaps you could also reduce the number of entries, make it say just 10 rows so any changes made would be noticeable more easily.

One last thing, say if there Location can be sort based on popularity. For example:

Location Popularity
Abingdon 1
Airdrie 2
Bangor 3
Belfast 4
Canterbury 5

Would it be possible to update the Rank upon dragging them up and down? eg. Dragging Airdrie to the first row will update the rank to 1 and change Abingdon's to 2.

Thank you!
# Posted By Moshi | 14/10/11 06:24
Shaun McCran's Gravatar Hi Moshi,
I agree, in my example the difference in size and shape make the elements awkward to drag over each other.

Also the 'delete' and 'duplicate' alerts simply show the fact that a function has been triggered. I tend not to actually delete records in demo's, you never know when someone will just delete all your data!

Changing the sort on poularity would be a good use for this type of functioanlity. You could submit the dropped value to a server side handler and detect the position change and adjust the records around it. Good spot.
# Posted By Shaun McCran | 18/10/11 14:08
Gdawg's Gravatar Hello - is it possible to have subcategory levels? Are you avail for hire?
# Posted By Gdawg | 22/11/11 21:55
Buck's Gravatar Is it possible to save the results of moving the rows to the database? I've been trying to find a way to do that in CF. Thanks.
# Posted By Buck | 29/11/11 12:39
Shaun McCran's Gravatar Gdawg,

Yes it is possible to have sub category levels, you just need to layer in the Div elements in a hierarchical way. That way the JQuery selector will just pick them up.

Yes, I am available for hire, if you have a specific project you want to get done let me know.

Buck,
Yes, in my example where the pop up message is triggered you can insert an AJAX request to a CFC that submits the position of the moved elements. That way the CFC can run a query and simply update an index value in the DB to change the order. If that doesn't make sense let me know and I'll put together an article on it.
# Posted By Shaun McCran | 30/11/11 06:51
Ivan's Gravatar Great work!
# Posted By Ivan | 06/02/15 05:57
# Posted By Kabi Kumar | 11/06/15 22:06
Packers And Movers In Bangalore's Gravatar <a href="http://www.lechalo.in/packers-and-movers-bangalore... And Movers In Bangalore</a><br>
<a href="http://www.lechalo.in/packers-and-movers-chennai/&... And Movers In Chennai</a><br>
# Posted By Packers And Movers In Bangalore | 22/09/15 04:07
Manik Chand's Gravatar Thanks for post this helpful post - Please visit for More information about -
Packers and Movers Bangalore @
http://www.expert5th.in/packers-and-movers-bangalo...
Packers and Movers Mumbai @
http://www.expert5th.in/packers-and-movers-mumbai/...
Packers and Movers Chennai @
http://www.expert5th.in/packers-and-movers-chennai...
# Posted By Manik Chand | 24/09/15 03:07
Yashwant Kumar's Gravatar This article is really fantastic and thanks for sharing the valuable post.
Packers and Movers Hyderabad @
http://www.expert5th.in/packers-and-movers-hyderab...
Packers and Movers Delhi @
http://www.expert5th.in/packers-and-movers-delhi/
Packers and Movers Gurgaon @
http://www.expert5th.in/packers-and-movers-gurgaon...
Packers and Movers Noida @
http://www.expert5th.in/packers-and-movers-noida/
# Posted By Yashwant Kumar | 24/09/15 03:08
Yashwant Kumar's Gravatar Thanks for all your information, Website is very nice and informative content.
Packers and Movers Pune @
http://www.expert5th.in/packers-and-movers-pune/
Packers and Movers Thane @
http://www.expert5th.in/packers-and-movers-thane/
Packers and Movers Navi Mumbai @
http://www.expert5th.in/packers-and-movers-navimum...
Packers and Movers Ghaziabad @
http://www.expert5th.in/packers-and-movers-ghaziab...
Packers and Movers Faridabad @
http://www.expert5th.in/packers-and-movers-faridab...
# Posted By Yashwant Kumar | 24/09/15 03:08
buy instagram followers's Gravatar Also the 'delete' and 'duplicate' alerts simply show the fact that a function has been triggered. I tend not to actually delete records in demo's, you never know when someone will just delete all your data!
instagram likes
http://socialgrand.com/buy-instagram-likes/
# Posted By buy instagram followers | 08/10/15 00:06
cardsharing's Gravatar Nice work! but dragged object no work in example..
# Posted By cardsharing | 08/10/15 00:51
cccam server's Gravatar Rather than writing out long winded table code to display your data in a tabulated fashion why not use the dataTables JQuery plugin to do it for you...
# Posted By cccam server | 15/11/15 03:26
Language of Desire's Gravatar I found so many interesting stuff in your blog especially its discussion. Really its great article. Keep it up.
# Posted By Language of Desire | 18/11/15 03:01
cccam server's Gravatar Thank you for your kind information. Actually I was very much sad that I couldn’t display dynamic data in tables. I have tried many methods and those were all failures. Now I am very happy in getting the perfect way to do this job
# Posted By cccam server | 21/11/15 01:13
Plumbing Service's Gravatar Thank you for your kind information. Actually I was very much sad that I couldn’t display dynamic data in tables. I have tried many methods and those were all failures. Now I am very happy in getting the perfect way to do this job
# Posted By Plumbing Service | 22/11/15 00:53
Alberta's Gravatar This is a wonderful article, Given so much info in it, These type of articles keeps the users interest in the website, and keep on sharing more ...Good luck. http://www.thejobfactory.com.au/how-to-find-aged-c...
# Posted By Alberta | 25/11/15 00:05
Kelowna Mortgage Renewal's Gravatar hese type of articles keeps the users interest in the website, and keep on sharing more ...Good luck. http://www.thejobfactory.com.au/how-to-find-aged-
[
# Posted By Kelowna Mortgage Renewal | 30/11/15 02:45
best drivers coverage's Gravatar It is a great website and nice share. I want to thank you. Good job! You guys do a great blog, and have some great contents. Keep up the good work!
# Posted By best drivers coverage | 14/12/15 21:33
Career School's Gravatar I basically need to tell you that I am new to weblog and absolutely delighted in this site page...
# Posted By Career School | 22/12/15 21:17
Unlock Her Legs's Gravatar Most of the time I don’t make comments on websites, but I'd like to say that this article really forced me to do so. Really nice post!
# Posted By Unlock Her Legs | 04/01/16 00:56
Car Show Display Boards's Gravatar I’m now working with WordPress for a couple of with this blogs and forums nonetheless wanting to switch one of them over to your stand akin to you for a trial offer perform.
# Posted By Car Show Display Boards | 04/01/16 22:14
The Bonding Code's Gravatar It was a wonderful chance to visit this kind of site and I am happy to know. thank you so much for giving us a chance to have this opportunity...
# Posted By The Bonding Code | 06/01/16 23:36
buy visitors's Gravatar I think this is one of the most significant information for me.And i am glad reading your article. But want to remark on some general things, The website style is ideal, the articles is really excellent...
# Posted By buy visitors | 09/01/16 21:33
places to visit in ajmer's Gravatar And i am glad reading your article. But want to remark on some general things, The website style is ideal, the articles is really excellent...
# Posted By places to visit in ajmer | 10/01/16 00:04
ajmer tourist places's Gravatar I am happy to know. thank you so much for giving us a chance to have this opportunity...
# Posted By ajmer tourist places | 10/01/16 00:05
Edward Bass's Gravatar I thought it was going to be some boring old post, but it really compensated for my time. I will post a link to this page on my blog. I am sure my visitors will locate that extremely useful...
# Posted By Edward Bass | 11/01/16 00:50
subscription boxes for women's Gravatar I’ve been thinking about writing a very comparable post over the last couple of weeks. I’ll probably keep it
# Posted By subscription boxes for women | 12/01/16 22:49
Miami Restoration Pro details's Gravatar That way the JQuery selector will just pick them up.

Yes, I am available for hire, if you have a specific project you want to get done let me know.
# Posted By Miami Restoration Pro details | 19/01/16 03:51
Back to top