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)'

Answer 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?

Answer 2

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 }
        }
    });