jQuery sortable contaiment issue
-
25-06-2021 - |
Pergunta
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)'
Solução
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?
Outras dicas
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 }
}
});