For an app I'm making I have a table with one always visible column, then you
can view 5 more, any extra columns are hidden. The 5 are selectable so that
you can choose which 5 you want to see.

This all works great except that I need to move the columns so that the
order of the columns is the same as what the use has selected. (see:
http://www.bungert.co.uk/forum_pics/table1.jpg )

To do that I use the following function:

        this.moveColumn = function(selecIdNum, selector)
        {
                var cells                       = $('.' + 
selector).clone(true); // Copy the cells
                var numberOfRows        = cells.length - 2; // - Cells from 
tfoot and thead
                var cellSelector        = 'TextCell';
                
                // Remove the cells
                $('.' + selector).remove();
                
                if (selecIdNum > 0) // If this is not the first selector
                {
                        // Change the cellSelector
                        cellSelector = selectors[selecIdNum - 1].lastActive + 
'Cell';
                }
                
                // Add the thead tfoot cells
                $('#contentTable thead th.' + cellSelector).after(cells[0]);
                $('#contentTable tfoot th.' + cellSelector).after(cells[1]);
                
                // Now the tbody cells
                for (row = 0; row < numberOfRows; row ++)
                {
                        // Get the TD that we need to paste after
                        var td = $('#contentTable tbody tr.row' + row + ' td.' 
+ cellSelector);
                        
                        // Insert the new cell
                        $(td).after(cells[row + 2]);
                }
                
                //$("#contentTable").tablesorter();
        }

The move is fine, it shows the columns in the same order as the user has
selected but the events are all gone when I copy the cells using:

var cells                       = $('.' + selector)

I now use:
var cells                       = $('.' + selector).clone(true);

and this copies my onmouseover/out events but the table sorting ones are no
longer there.

I tried re-applying tablesorter();, this sort of works. I can sort the new
column but only once, then it does nothing... teh same is also true for all
columns after calling tablesorter() again.

Anyone know how I can clone the cells with all their tablesorting functions?
Or re-apply the tablesorter() function so that the sorting works?

-----
-- 
Stephen Bungert
-- 
View this message in context: 
http://www.nabble.com/Tablesorter-problem-when-moving-columns-around-tp24642526s27240p24642526.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.

Reply via email to