Being able to re-order table columns has been something that I have always wanted to do. Because of a tables' markup you can't just use the jQuery UI sortables widget. After seeing akottr's dragtable plugin I was inspired to create a jQuery UI widget similar to his plugin. I set out with a few design goals; Flexible API, very responsive column drag(works with well with tables that have +1000 cells) and a easy to customize css framework.
How It Works
When a column handle is clicked it gets the index of the column. Then it goes through all of the <tr> and gets the <td> with that index and adds the class dragtable-col-placeholder. Once that is done I creates a copy of the table and appends the column collection to it. The copy of the table is used for the drag display. Once the User drops the drag display, the drag display is removed and .dragtable-col-placeholder class is removed from all of the cells in the selected column in the target table.
- Include the following files on your page
- jQuery 1.4.4
- jQuery UI 1.8.6
- jQuery UI theme of your choice
Set up your data table
<table id="one"> <thead class="test"> <tr> <th data-header="id"><div class="dragtable-drag-handle"></div> ID</th> <th data-header="first_name">first name</th> <th data-header="last_name">last name</th> <th data-header="phone_number">phone number</th> <th data-header="color">team color</th> <th data-header="salary">salary made</th> </tr> </thead> <tbody> <tr> <td>10234</td> <td>John</td> <td>Smith</td> <td>555-555-5555</td> <td>orange</td> <td>$2.00</td> </tr> <tr> <td>102288</td> <td>Jane</td> <td>Smith</td> <td>555-445-5555</td> <td>purplue</td> <td>$1000.00</td> </tr> </tbody> </table>
Take a look at the in the . You'll notice that they have an attribute named data-header. That attribute is used by the widgets method to set / get the column order. Also the first th contains a div with the class of dragtable-drag-handle. If an element is found inside the th with that class that will be used as the drag handle otherwise it will be the whole th.
Next Just Initiate the widget
|dataHeader||hange this if you would like to use a different th attubute(data-column-label) for the column headers||data-header|
|handle||The drag handle class||.dragtable-drag-handle|
|change||optional callback function that is called when the column order changes||$.noop|
|displayHelper||optional callback function that can be used to tweak the look of the column in that is currently getting dragged||$.noop|
Set or get the colum order
var order = $('table').dragtable('order'); //order is now [ 'firstname' , 'id' ,'lastname'' , etc......]
$('table').dragtable('order', [ 'firstname' , 'id' ,'lastname'' , etc......]); //Gotcha right now the array that you provide length must match the current length of the table columns
|start||when the user mouses down on handle or th, use in favor of display helper|
|beforechagne||called when a column will be moved, the user is still dragging|
|change||called after the column has been moved, the user is still dragging|
|stop||after the user drops the column and stops dragging|