RowSorter.js
Drag & drop row sorter plugin.
- Works on Touch devices.
- Supports IE8+ and all other modern browsers.
- No framework dependency (But registers itself as a jquery plugin if exists.)
Install
bower install rowsorter
<script type="text/javascript" src="https://github.com/arteyazilim/rowsorter/raw/v2.1.1/path/dist/RowSorter.js"></script>
Usage
<script type="text/javascript">
//// No Framework
// Set table as sortable
new RowSorter('#table_id'/*, options*/);
// Revert last drag
RowSorter.revert('#table_id');
// Destroy sortable
RowSorter.destroy('#table_id');
//// jQuery Plugin
// Set table as sortable
$('#table_id').rowSorter(/*options*/);
// Revert last drag
$.rowSorter.revert('#table_id');
// Destroy sortable
$.rowSorter.destroy('#table_id');
</script>
Options:
@string handler : drag handler selector (default: null)
@boolean tbody : pass true if want to sort only tbody > tr. (default: true)
@string tableClass : adds this class name to table while rows are sorting (default: "sorting-table")
@string dragClass : dragging row's class name (default: "sorting-row").
@number stickTopRows : count of top sticky rows (default: 0),
@number stickBottomRows : count of bottom sticky rows (default: 0),
@function onDragStart : (default: null)
@function onDragEnd : (default: null)
@function onDrop : (default: null)
Handling Events
onDragStart: function(tbody, row, old_index) {
// find the table
// if options.tbody is true, this param will be tbody element
// otherwise it will be table element
var table = tbody.tagName === "TBODY" ? tbody.parentNode : tbody;
// old_index is zero-based index of row in tbody (or table if tbody not exists)
console.log(table, row, old_index);
},
// if new_index === old_index, this function won't be called.
onDrop: function(tbody, row, new_index, old_index) {
// find the table
// if options.tbody is true, this param will be tbody element
// otherwise it will be table element
var table = tbody.tagName === "TBODY" ? tbody.parentNode : tbody;
// old_index is stored index of row in table/tbody before start the dragging.
// new_index is index of row in table/tbody after the row has been dragged.
console.log(table, row, new_index, old_index);
},
// if new_index === old_index, this function will be called.
onDragEnd: function(tbody, row, current_index) {
console.log('Dragging the ' + current_index + '. row canceled.');
}
Samples
File Sizes
- Minified: ~7kb
- Minified and gzipped: < 3kb