.sorttable Examples

default initialization.


$('#ex1').sorttable({
}).disableSelection();

header 1	header 2	header 3	header 4
1-1	1-2	1-3	1-4
2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4

Use the handle option to restrict the drag area to the specified element


$('#ex2').sorttable({
    handle: '.draghandle', // drag using handle
    placeholder: 'placeholder' // placeholder classname
}).disableSelection();

* header 1	* header 2	* header 3	* header 4
1-1	1-2	1-3	1-4
2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4

Specifies which items inside the first table row (<tr>) should be sortable


$('#ex3').sorttable({
    items: '>:not(.nosort)',
    placeholder: 'placeholder',
}).disableSelection();

header 1	header 2	header 3	header 4 (no sort)
1-1	1-2	1-3	1-4
2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4

Specifies all cells within the column should drag.


$('#ex4').sorttable({
    placeholder: 'placeholder',
    helperCells: null
}).disableSelection();

header 1	header 2	header 3	header 4
1-1	1-2	1-3	1-4
2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4

Specifies how many cells from the top within the column should drag.

When using this option cells must have the same parent. For example if you first row is in <thead> and your second row is in <tbody> specifying anything greater than one will not result in additional dragged cells.


$('#ex5').sorttable({
    placeholder: 'placeholder',
    helperCells: 2
}).disableSelection();

header 1	header 2	header 3	header 4
1-1	1-2	1-3	1-4
2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4

Specifies how many cells from the bottom within the column should not be dragged. Using a negative value is useful for footer rows that should not be moved.

When using this option cells must have the same parent. For example if you first row is in <thead> and your second row is in <tbody> specifying anything greater than one will not result in additional dragged cells.


$('#ex6').sorttable({
    placeholder: 'placeholder',
    helperCells: -1
}).disableSelection();

header 1	header 2	header 3	header 4
1-1	1-2	1-3	1-4
2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4
*	*	*	*

Applies a selector to the list of cells in the column before dragging. This example prevents tds that belong to rows with class 'footerrow' from dragging.


$('#ex7').sorttable({
    placeholder: 'placeholder',
    helperCells: ':not(.footerrow td)'
}).disableSelection();

header 1	header 2	header 3	header 4
1-1	1-2	1-3	1-4
2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4
class="footerrow"

No additional events to the jquery ui sortable widget were added. This example fades all rows but the header during the drag.


$('#ex8').sorttable({
    placeholder: 'placeholder',
    start: function (e, ui) { ui.item.parents('table:first').children().find('>tr:not(.ui-sortable)').fadeTo('slow', 0.25); },
    stop: function (e, ui) { ui.item.parents('table:first').children().find('>tr:not(.ui-sortable)').fadeTo('fast', 1); }
}).disableSelection();

header 1	header 2	header 3	header 4
1-1	1-2	1-3	1-4
2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4

A simple example showing an ajax table load into a placeholder div.


$('#ex9').load(
    'ajax.html',
    function() {
        $('#exAjax').sorttable({}).disableSelection();
    }
)