jquery.dragtable.js

I read about dragtable on ajaxian.com. It is a library-independent js-function that gives you the ability to re-order table columns by using drag'n'drop. This function does not exactly fulfill my needs. So I thought to myself 'Why not doing it the jQuery way?' And my next thought was like in Trash of the Titans 'Can't someone else do it?' I started google-ing and found nothing. So why not being the garbage man and doing the stuff on my own? That couldn't be that hard. There is some really cool stuff growing around jQuery (especially jQuery-ui). So I took the jQuery-core and the sortable-Plugin form jQuery-ui and put my stuff on the top of this stack. One weekend and some coffees later this is the result.
Enjoy.
akottr / the garbage man / email (mouseover)

fork me on github

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

demo (width:100%)

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

Table with a fixed footer.

code

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

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
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 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