JQuery UI Sortable: Tables with sets of rows?

Question

I have an HTML table (#view-page-table) with close to the following HTML:

<table id="view-page-table">
    <thead>
        <th>Header1</th>
        <th>Header2</th>
    </thead>
    <tbody>
        <tr><td>Group 1</td><td>Group 1</td></tr>
        <tr><td>Group 1</td><td>Group 1</td></tr>

        <tr><td>Group 2</td><td>Group 2</td></tr>
        <tr><td>Group 2</td><td>Group 2</td></tr>

        <tr><td>Group 3</td><td>Group 3</td></tr>
        <tr><td>Group 3</td><td>Group 4</td></tr>
    </tbody>
</table>

My jQuery is simple right now:

function reOrder() {
    $("#view-page-table tbody").sortable({
        helper: function(e, ui) {
             ui.children().each(function() {
                 $(this).width($(this).width());
             });
             return ui;
        }
    }).disableSelection();
}

It seems to work fine (the helper function is to maintain cell width while moving). The only problem is, I need to move two <tr>'s at a time. In other words, the user needs to drag all of group one, two, or three without being able to drag just one row. I tried to add a div in the table but I guess that's a no-no.

Ahmed Assaf · Accepted Answer · 2012-12-30 16:59:00Z

6

I think I have solution, but not optimum. try to make tabel inside

<tbody>
        <tr><td>Group 1</td><td>Group 1</td></tr>
        <tr><td>Group 1</td><td>Group 1</td></tr>
</tbody>
<tbody>
        <tr><td>Group 2</td><td>Group 2</td></tr>
        <tr><td>Group 2</td><td>Group 2</td></tr>
</tbody>
<tbody>
        <tr><td>Group 3</td><td>Group 3</td></tr>
        <tr><td>Group 3</td><td>Group 4</td></tr>
</tbody>

And replace your script with this one

function reOrder() {
    $("#view-page-table").sortable({
        helper: function(e, ui) {
             ui.children().each(function() {
                 $(this).width($(this).width());
             });
             return ui;
        },
        handle: "tbody"
    }).disableSelection();
}

Best of Luck

answered Dec 30, 2012 at 16:59

Ahmed Assaf

6018 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rlanvin Over a year ago

The above code didn't work for me, I had to replace handle: "tobdy" by items: "tbody". Otherwise, very nice solution!

Nathan Over a year ago

Thanks for this answer. Using something similar, I achieved technically correct results, but with extreme formatting issues. I eventually abandoned my effort and relooked at how I approached the issue altogether. Thanks.

ventaur · Accepted Answer · 2012-12-30 16:51:30Z

2

Try wrapping the related rows in their own tbody tag. You can use multiple tbody tags in a single table. This is an ideal use case.

answered Dec 30, 2012 at 16:51

ventaur

1,85111 silver badges24 bronze badges

1 Comment

Magnus Over a year ago

Awesome answer! Had no idea that was possible!

Nexus Fred · Accepted Answer · 2016-08-26 04:26:17Z

1

The Ahmed Assaf solution need to be modified as below

HTML Code

<table id="sort" border="1" width="500">  
    <thead>  
    <tr><th>Col 1</th><th>Col 2</th><th>Col 3</th></tr>  
    </thead>  
    <tbody class="red">
            <tr><td>Group 1</td><td>Group 1</td><td>Group 1</td></tr>
            <tr><td>Group 1</td><td>Group 1</td><td>Group 1</td></tr>
    </tbody>                                    
    <tbody>                                     
            <tr><td>Group 2</td><td>Group 2</td><td>Group 2</td></tr>
            <tr><td>Group 2</td><td colspan="2">Group 2 and Group 2</td></tr>
    </tbody>                                    
    <tbody class="blue">                                     
            <tr><td>Group 3</td><td>Group 3</td><td>Group 3</td></tr>
            <tr><td>Group 3</td><td>Group 4</td><td>Group 4</td></tr>
    </tbody>
</table>

Script Code

// Return a helper with preserved width of cells  
var fixHelper = function(e, ui) {  
  ui.children().children().each(function() { 
    $(this).width($(this).width()); 
  });  
  return ui;  
};

$("#sort").sortable({
        helper: fixHelper,
        items: "tbody"
    }).disableSelection();

In the fixHelper function the code line

ui.children().each(function()

need to be replace with

ui.children().children().each(function()

to catch the TD width value.

And the line

handle: "tbody"

need to be replace with

items: "tbody"

has indicated by rlanvin in his comment

Demo on jsfiddle

Best Regard NexusFred

edited Aug 26, 2016 at 4:26

answered Aug 24, 2016 at 11:03

Nexus Fred

631 silver badge11 bronze badges

2 Comments

Anil D Over a year ago

which jquery-ui version is required to set helper with parameter? for me param 'ui' is giving error

Nexus Fred Over a year ago

Sorry for the delay. In this demo I use the JQuery UI 1.11.4.

Collectives™ on Stack Overflow

JQuery UI Sortable: Tables with sets of rows?

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related