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