description

Simple table with default options

code

$('#defaultTable').dragtable();

demo

TIME %user %nice %system %iowait %idle
12:10:01 AM28.860.041.650.0869.36
12:20:01 AM26.540.001.640.0871.74
12:30:01 AM29.730.001.660.0968.52

demo (width:100%)

TIME %user %nice %system %iowait %idle
12:10:01 AM28.860.041.650.0869.36
12:20:01 AM26.540.001.640.0871.74
12:30:01 AM29.730.001.660.0968.52

description

Table with a fixed footer.

code

$('#footerTable').dragtable({excludeFooter:true});

demo

TIME %user %nice %system %iowait %idle
12:10:01 AM28.860.041.650.0869.36
12:20:01 AM26.540.001.640.0871.74
12:30:01 AM29.730.001.660.0968.52
Footer: Some random sar values

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 AM28.860.041.650.0869.36
12:20:01 AM26.540.001.640.0871.74
12:30:01 AM29.730.001.660.0968.52

description

Persist your state on the server

code

$('#persistTable').dragtable({persistState:'/someAjaxUrl'});

demo

TIME %user %nice %system %iowait %idle
12:10:01 AM28.860.041.650.0869.36
12:20:01 AM26.540.001.640.0871.74
12:30:01 AM29.730.001.660.0968.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 AM28.860.041.650.0869.36
12:20:01 AM26.540.001.640.0871.74
12:30:01 AM29.730.001.660.0968.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 AM28.860.041.650.0869.36
12:20:01 AM26.540.001.640.0871.74
12:30:01 AM29.730.001.660.0968.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 AM28.860.041.650.0869.36
12:20:01 AM26.540.001.640.0871.74
12:30:01 AM29.730.001.660.0968.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 AM28.860.041.650.0869.36
12:20:01 AM26.540.001.640.0871.74
12:30:01 AM29.730.001.660.0968.52