CODEWITHSUNDEEP
jquery-uijquery-selectorsjquery-ui-sortable
Robert Altman
Robert Altman

Reputation: 5505

jQuery UI sortable with fixed rows

I'm using a jQuery UI sortable with a table (works fine). I would like to make the header and last row fixed (non-moveable).

The jQuery UI docs indicate this can be done using a selector for items, but I am at a loss for the syntax.

Here is the relevant code:

<script type="text/javascript">
    $(function () {
    $("#response_options tbody.content").sortable();
    $("#response_options tbody.content").disableSelection();
});
</script>

<table id="response_options" class="data-table">
    <tbody class="content">
        <tr>
            <th>Links</th><th>Response</th>
        </tr>
        <tr class="sortable-row">
           <td>Edit</td>
           <td>Item 1</td>
        </tr>
        <tr class="sortable-row">
            <td>Edit</td>
            <td>Item 2</td>
        </tr>
        <tr class="sortable-row">
            <td>Edit</td>
            <td>Item 3</td>
        </tr>
        <tr class="sortable-row">
            <td>Edit</td>
            <td>Item 4</td>
        </tr>
        <tr class="sortable-row">
            <td>Edit</td>
            <td>Item 5</td>
        </tr>
        <tr>
            <td>Edit</td>
            <td>Item 1</td>
        </tr>
    </tbody>
</table>

The selector goes inside .sortable(...):

$("#response_options tbody.content").sortable();

as

$("#response_options tbody.content").sortable( items: ??? );

and it should be possible to select only items with class="sortable-row"; but again, I am at a loss for the syntax.

Upvotes: 9

Views: 8711

Answers (3)

jagadeesh
jagadeesh

Reputation: 41

For this markup:

<table id="tableid">
    <thead>
        <tr>    
            <th>namr</th>
            <th>id</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>jagadeesh</td>
            <td>1</td>
        </tr>
        <tr>
            <td>jagadeesh</td>
            <td>2</td>
        </tr>
    </tbody>
</table>

Use this jQuery:

$('#tableid tbody').sortable();

It will move only body content of table you cannot move header part.

Upvotes: 4

Dieter Gribnitz
Dieter Gribnitz

Reputation: 5208

This worked for me:

        jQuery(".sortable tbody").sortable({
            items: 'tr:not(:first)'
        });

Upvotes: 8

Xnake
Xnake

Reputation: 940

This should work: 

$("#response_options tbody.content").sortable({items: 'tr.sortable-row'});

Upvotes: 11

Related Questions