jQuery sortable contaiment issue

Question

Desired effect: rows (tr) with class do-not-sort excluded from containment using jQuery.sortable.

Current code: (containment: 'parent'/containment: '.sortable-body')

<table>
    <thead>
        <tr>
            <th>Field 1</th>
            <th>Field 2</th>
        </tr>
    </thead>
    <tbody class="sortable-body">
        <tr>
            <td>Sortable Field 1</td>
            <td>Sortable Field 2</td>
        </tr>
        <tr>
            <td>Sortable Field 1</td>
            <td>Sortable Field 2</td>
        </tr>
        <tr class="do-not-sort">
            <td colspan="2"><a href="#">Add Row</a></td>
        </tr>
    </tbody>
</table>

How can I exclude the 'do-not-sort' row at the end (!) of a tbody from the containment? The following didn't work:

containment: '.sortable-body tr:not(.menu-rij-toevoegen)'

score 1 · Accepted Answer · edited May 23 '17 at 12:26

1

~~You can identify which items are sortable with the 'items' parameter -- the value should be specified as a CSS selector.~~

So to provide negative criteria (exclude elements from the group), use the :not() pseudo-class, like this:

$('.sortable-body').sortable({ items: 'tr:not(.do-not-sort)' });

And it works here, with your precise markup: http://jsfiddle.net/MUEuW/2/

Update: probably your best way of excluding the last row from containment is to simply wrap it in a separate <tbody> tag.

Multiple <tbody>s are legal. See: Can we have multiple <tbody> in same <table>?

Updated fiddle here: http://jsfiddle.net/MUEuW/3/

... or do you not have control over the HTML?

edited May 23 '17 at 12:26

Community

1
1

answered Aug 10 '12 at 14:55

Faust

15,130
9
54
111

Containment is different from items. In fact, I already specified this items parameter. I'm talking about the 'containment' parameter, as stated in the question. – Simon Aug 10 '12 at 17:41
Thank you! Maybe is better for this purpose, but the idea is the same. – Simon Aug 11 '12 at 19:11

score -1 · Answer 2 · edited May 23 '17 at 10:24

-1

Take a look at my prior post. https://stackoverflow.com/a/9535584/665387

You can specify non sort-able columns like

$('#tableRoster').tablesorter({
        headers: {
            0: { sorter: false },
            4: { sorter: false }
        }
    });

edited May 23 '17 at 10:24

Community

1
1

answered Aug 10 '12 at 14:32

Ravi Ram

24,078
21
82
113

jQuery.tablesort is not the same as jQuery.sortable ;) – Simon Aug 10 '12 at 14:39

jQuery sortable contaiment issue

2 Answers2