description
Simple table with default options
code
$('#defaultTable').dragtable();
demo
TIME | %user | %nice | %system | %iowait | %idle |
---|---|---|---|---|---|
12:10:01 AM | 28.86 | 0.04 | 1.65 | 0.08 | 69.36 |
12:20:01 AM | 26.54 | 0.00 | 1.64 | 0.08 | 71.74 |
12:30:01 AM | 29.73 | 0.00 | 1.66 | 0.09 | 68.52 |
description
Moving only the header. Recommended for very large tables (cells > 1000)
code
$('#onlyHeaderTable').dragtable({maxMovingRows:1});
demo
TIME | %user | %nice | %system | %iowait | %idle |
---|---|---|---|---|---|
12:10:01 AM | 28.86 | 0.04 | 1.65 | 0.08 | 69.36 |
12:20:01 AM | 26.54 | 0.00 | 1.64 | 0.08 | 71.74 |
12:30:01 AM | 29.73 | 0.00 | 1.66 | 0.09 | 68.52 |
description
Persist your state on the server
code
$('#persistTable').dragtable({persistState:'/someAjaxUrl'});
demo
TIME | %user | %nice | %system | %iowait | %idle |
---|---|---|---|---|---|
12:10:01 AM | 28.86 | 0.04 | 1.65 | 0.08 | 69.36 |
12:20:01 AM | 26.54 | 0.00 | 1.64 | 0.08 | 71.74 |
12:30:01 AM | 29.73 | 0.00 | 1.66 | 0.09 | 68.52 |
description
Maybe you want to sort the columns ascending/descending by clicking into the table-head.
No problem! Use a handle to drag'n'drop the columns.
code
$('#handlerTable').dragtable({dragHandle:'.some-handle'});
demo
TIME | %user | %nice | %system | %iowait | %idle |
---|---|---|---|---|---|
12:10:01 AM | 28.86 | 0.04 | 1.65 | 0.08 | 69.36 |
12:20:01 AM | 26.54 | 0.00 | 1.64 | 0.08 | 71.74 |
12:30:01 AM | 29.73 | 0.00 | 1.66 | 0.09 | 68.52 |
description
Allow only some rows to be draggable ('time' is not draggable anymore)
code
$('#constrainTable').dragtable({dragaccept:'.accept'});
demo
TIME | %user | %nice | %system | %iowait | %idle |
---|---|---|---|---|---|
12:10:01 AM | 28.86 | 0.04 | 1.65 | 0.08 | 69.36 |
12:20:01 AM | 26.54 | 0.00 | 1.64 | 0.08 | 71.74 |
12:30:01 AM | 29.73 | 0.00 | 1.66 | 0.09 | 68.52 |
description
Write your own persistence function
code
$('#customPersistTable').dragtable({persistState: function(table) {
table.el.find('th').each(function(i) {
if(this.id != '') {table.sortOrder[this.id]=i;}
});
$.ajax({url: '/myAjax?hello=world',
data: table.sortOrder});
}
});
demo
TIME | %user | %nice | %system | %iowait | %idle |
---|---|---|---|---|---|
12:10:01 AM | 28.86 | 0.04 | 1.65 | 0.08 | 69.36 |
12:20:01 AM | 26.54 | 0.00 | 1.64 | 0.08 | 71.74 |
12:30:01 AM | 29.73 | 0.00 | 1.66 | 0.09 | 68.52 |
description
Write your own persistence function to store your data on the client-side and restore the state onload.
Drag some rows and reload this page. The table remains ordered.
(does not work in IE6/7 and without a server)
code
$('#localStorageTable').dragtable({
persistState: function(table) {
if (!window.sessionStorage) return;
var ss = window.sessionStorage;
table.el.find('th').each(function(i) {
if(this.id != '') {table.sortOrder[this.id]=i;}
});
ss.setItem('tableorder',JSON.stringify(table.sortOrder));
},
restoreState: eval('(' + window.sessionStorage.getItem('tableorder') + ')')
});
demo
TIME | %user | %nice | %system | %iowait | %idle |
---|---|---|---|---|---|
12:10:01 AM | 28.86 | 0.04 | 1.65 | 0.08 | 69.36 |
12:20:01 AM | 26.54 | 0.00 | 1.64 | 0.08 | 71.74 |
12:30:01 AM | 29.73 | 0.00 | 1.66 | 0.09 | 68.52 |