CODEWITHSUNDEEP
jqueryjquery-uisortingdrag-and-drop
A. Morrow
A. Morrow

Reputation: 165

Drag and drop sorting of table columns with jQuery

I'm using jQuery to drive my AJAX UI. I have a table of data, and I want to allow the user to reorder the columns in the table by dragging and dropping them. I'd like the user to be able to grab the header for a column and move it. The row of data underneath should follow. Note that I'm not interested in sorting the data or in reordering rows, but in allowing the user to change the order of the columns.

Is there an existing solution? I tried using the standard jQuery sortable call on the <th> elements, but of course that doesn't work. I browsed through the jQuery plugins site and didn't find anything. Will I need to write a jQuery plugin?

Edit: Note that jQuery, Dojo, etc. (the free ones) are really the only option for a JS framework. I can't get a license for anything commercial like ExtJS.

Upvotes: 9

Views: 42788

Answers (7)

Vatsal M
Vatsal M

Reputation: 59

Try this instead: 

$('.sort').sortable({
  cursor: 'move',
  axis: 'y',
  update: function(e, ui) {
    $(this).sortable('refresh');
    var params = {};
    params = $('.id').serializeArray(),
      $.ajax({
        type: 'POST',
        data: {
          id : params
        },
        url: 'Your url',
        success: function(msg) {
          // Your sorted data.
        }
      });
  }
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>abc</th>
      <th>xyz</th>
    </tr>
  </thead>
  <tbody class="sort">
    <tr>
      <input class="id" name="id" type="hidden" value="Your Value" />
      <td class="center"><span>Text Here</span></td>
      <td>Yes, you are done</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
  </tbody>
</table>

Upvotes: 5

Christoph
Christoph

Reputation: 4000

There's a JQuery UI Widget called Dragtable.

Live demo

Upvotes: 16

user1483285
user1483285

Reputation: 41

Here is another one that builds on top of the jquery-ui library http://akottr.github.io/dragtable/

Upvotes: 4

me_an
me_an

Reputation: 509

you mean something like this? Table Drag and Drop JQuery plugin

Upvotes: -1

aradil
aradil

Reputation: 502

Sorttable jquery UI library appears to do exactly what you want here.

https://github.com/dbrink/sorttable/wiki http://plugins.jquery.com/project/sorttable

Upvotes: 4

Damo
Damo

Reputation: 11550

You should try Dragtable by Danvk

I found this question while searching for a fix to a bug in it though. It doesn't like tables positioned in horizontally scrolling panels.

Aside from this it's fantastic.

Upvotes: 2

Brian Duncan
Brian Duncan

Reputation: 500

If you are willing to pay for a license you might try Ext JS instead of just jQuery. There are some pretty powerful grid features that include what you are trying to do.

http://www.extjs.com/deploy/dev/examples/grid/array-grid.html

Upvotes: 1

Related Questions