using ColReorder vs ColReorderWithResize

twmjr

Two questions:
1) Do I need both libraries? I can not seem to find instructions on which libs to use.
2) I have tried each one and in both cases I am only able to move columns to after the last column and not back. If I use the resize I get the handle but the function does not work.

The table is initialized in the fnDrawCallback": function( oSettings ) that I have included in the .dataTable init. If it makes any difference, the table is in a tab.

Here are the init props.

$('#searchResultsTable').dataTable({
"iDisplayLength": 25,
"aLengthMenu": [[5, 25, 50, 100, -1], [5, 25, 50, 100, "All"]] ,
"bJQueryUI": true,
"bAutoWidth": true,
"aoColumnDefs" : [ {"bSearchable" : false, "bSortable" : false, "aTargets" : [ 0 , 7 , 8] } ],
"sPaginationType": "full_numbers",
"bDestroy": true,
"bProcessing": true,
"sDom": 'R<"H"lfr>t<"F"ip>',
"fnDrawCallback": function( oSettings ) { other stuff here }

I have no ability to provide a link to the page, but just looking for some ideas as to what I should look at.

Thanks.

allan

> 1) Do I need both libraries? I can not seem to find instructions on which libs to use.

No - ColReorderWithReisze is an unsupported enhancement to the original ColReorder plug-in (which is supported as part of the core DataTables project), which provides additional features. They cannot be used together.

> 2) I have tried each one and in both cases I am only able to move columns to after the last column and not back [...] I have no ability to provide a link to the page, but just looking for some ideas as to what I should look at.

We'd need to be able to see a test case showing the issue to offer much help. I'd say perhaps debug the events with Visual Event - that'd probably be my first thing I'd try.

Allan

rshay

I believe I've run into the same, or at least a similar, issue.

I have attempted to use both ColReorder and ColReorderWithResize independently.

When dragging a column to move it, the column is made to be the width of the entire table.. and regardless of where dropped, it ends up as the last column.

With the "WithResize" alternative, the same issue occurs, but in addition when dragging to resize a column, it doesn't change size at all.

If/When I figure out a solution, or even what may be causing the conflict, I'll post it back here for anyone else that may run into this in the future.

UPDATE:

From what I can tell, this is not an issue with either of the libs themselves and at least in my case is a style issue. If the table is inside a non-fluid container and the table is set to 100% already, then it doesn't want to resize the columns. Making the containing section (or whatever element you're using) wider and allowing the table to render to full size, seems to have partially corrected the issue. Columns are now resizeable, but reordering any column still drops it as the last column regardless of where you try to put it. For reference, I am using the twitter bootstrap in this instance and the offending style was .container-block. I set the width (previously not set at all) to 100%.