@brainwave9 and @brightgarden - After I reorder a column the sort is broken because the aDataSort[0] field is not changed correctly and still refers to the previous column index.
Look for "Move the internal array elements" in the code.
/*
* Move the internal array elements
*/
/* Columns */
fnArraySwitch( oSettings.aoColumns, iFrom, iTo );
// DAM fix issue where column doesn't sort properly after reordering
oSettings.aoColumns[iTo].aDataSort[0] = iTo;
oSettings.aoColumns[iFrom].aDataSort[0] = iFrom;
// DAM
Add the code between //DAM comments and it should work correctly.
@kolklik and @GregP and @allan, I think I resolved the issue regarding making it easier to grab and resize columns. The original version had the grab area only 1px in size. Below is the update to make it anything you want.
Look in the source for "are we on the col border" and modify the code as follows. Change the value of 10 to anything you want. The original code is shown as a comment.
/* are we on the col border (if so, resize col) */
// DAM make it easier to resize columns
//if (e.pageX == Math.round(offset.left + nLength))
if (Math.abs(e.pageX - Math.round(offset.left + nLength)) <=10)
{
$(nThTarget).css({'cursor': 'col-resize'});
}
else
$(nThTarget).css({'cursor': 'pointer'});
}
can be accomplished this way which I think might be a little cleaner. Look for "Mark the original column" and modify as follows:
/* Mark the original column order for later reference */
this.s.dt.aoColumns[i]._ColReorder_iOrigCol = i;
// DAM
$(this.s.dt.aoColumns[i].nTh).click(function(event) {
if ($(event.target).css('cursor') === 'col-resize'){
console.log('cancel bubble');
event.cancelBubble = true;
event.stopImmediatePropagation();
}
});
//DAM
sorry to have not answer before, i wasn't notified of all these posts; fortunately i've received 2 emails yesterday to remind me of this plugin, one of them with some corrections to implement.
thanks for all your remarks, i will try to work on this project today and will keep you notified of the advancement
i will send my updates to Allan this afternoon and see with him if we need to have 2 different plugins for ColReorder.
Thanks a lot to Martin for all the corrections.
List of updates :
1) rebased ColReorderWithResize on v1.0.5 of ColReorder
=> now you have visual feedback with reorder
2) integrated Martin's corrections :
a. Made the "hot area" for resizing a little wider (it was a little difficult to hit the exact border of a column for resizing)
b. Resizing didn't work at all when using scroller (that plugin splits the table into 2 different tables: one for the header and another one for the body, so when you resized the header, the data columns didn't follow)
c. Fixed collateral effects of sorting feature
3) added 2 new init options allowReorder and allowResize, both default to true, to control functionnalities of the plugin
Hi, cbattarel and Allan, thanks for this nice plugin. Currently when I used it together with ColReorder, I moved and resize some columns and have bStateSave:true. after reloading the data via ajax. I got the column header remain as original order. but if I only use the ColReorder.js, the order is preserved. can you tell what's wrong? Also is it possible to track the changed column size in the cookie, so the column size will preserve after refreshing?
Thanks
Hello all,
Any status on the pending update cbattarel? I'm planning on putting some kind of hook into ColReorderWithResize to make it work nicely with ColumnFilterWidgets (https://github.com/cyberhobo/ColumnFilterWidgets) , but I would like to hold off until the update you posted 10 days ago goes through so that the resizing works with sScrollY.
There is a bug in the version that I've got whereby it doesn't work with tables which aren't scrolling tables - however that source is available here: http://datatables.net/extras/thirdparty/ColReorderWithResize/ColReorderWithResize-1.0.5.js . I'll try to look at it soon to figure out what the problem is.
as far as i know, the bug has been corrected and the code is available on the plugin page : http://datatables.net/extras/thirdparty/ColReorderWithResize/
Yup - all up to date now - 1.0.5 of the plug-in is working with both scrolling and non-scrolling tables thanks to the contributions of cbattarel and Martin.
I tried it out. A timely life saver, since my users were just complaining about the automatic column widths yesterday. I told them I'd revisit the ReorderWithResize plugin, but it wasn't working so well last time I tried it. Now, much better! Thanks all.
Just one hitch: the resize doesn't update the footer row, as used in the Column Filtering examples. The footers are reordered correctly, but not resized. However, after paging up or down, the footer does take on the new column size. Any ideas?
One issue (im not sure if its only me):
For soem reason, is not saving the correct "statesave" order...
No matter how i reorder the columns, the statesave ALWAYS saves the initial order.
So for example, if i reorder from 1,2,3,4,5 --> 4,2,1,3,5,
the state that is saved will STILL be 1,2,3,4,5. Hence when i refresh, my col reordering is reset...
Is this a bug or is it supposed to be like that?
Also, any chance you can add in a "state save" for the new sizes of columns as well?
dont forget to thanks Martin who did a great job on this last version and of course Allan who wrote most of the code and manage all the datatables project.
I will look at the issues you pointed in the next weeks since i will develop a new app using this plugin and need also the features you requested.
would it be possible to enhance the plug in - currently you can only shrink the column to the width of the widest visible value, would be great if one could shrink the column and have the value show truncated with ellipses as the trailing part of the value. some of my data values are long strings of text without spaces and I've been struggling to figure out how to implement the ellipses to help keep the entire table within the visible page
great plugin, most def a needed and welcome addition
I don't think its possible to do quite as the plug-in currently works, side it is contained by the layout that can be applied to a TABLE tag. What I think would be needed would be to wrap the contents of each cell in a DIV and then use overflow:hidden or similar to hide the content allowing the columns to get smaller. You could try wrapping your content up in such a way and see if that does the job for you.
@cbattarel: I don't specify the width property in the footer. Do you have a working example? I planned to try again using a the column search example page, as a starting point.
I looked about for a solution to my question, but was not lucky enough to find one. When I first go to my page a couple things happen. First, it takes a minute or two to do something with the data that causes the browser to be unavailable as it pops up pieces of the table, makes them vanish, pops in header bits. Eventually it settles down and I get a table with a fixed header. However, the header column widths do not match the table data column widths. If I click on a column to sort, it does however eventually show a table where the header and table data column widths match. The table has about 1300 rows. Is there a way to force whatever clicking on a column does on the page load to make it resize the columns to match?
An intersting thing is if I change th style for th td font-size from 10px to say 12px the header column sizes lines up with the data, but the data does not fit in the screen and a horizontal scroll bar appears. Perhaps the forcing of column resizing with the larger font causes the column sizes to match up.
I need the bugfix on the ColReorder latest nightly.
I also wanted the ColResize, hence this plugin would be what I was looking for if it was up-to-date, before I convince myself I need to try and implement it myself, ain't there a chance to update the ColReorder in this plugin?
Thank you authors, anyway, your code will help me do it, eventually if no one answers my prays :)
The ColReorderWithResize plug-in is not updated by myself, nor am I aware of anyone else having updated it yet. Perhaps we should get it into Github so updates can be pushed around - however, it isn't an optimal solution to column resizing in DataTables.
i have already suggested that we have only one plugin for colreorder, it would be better for updates.
there are options in colreorderwithresize plugin to allow reorder and/or resizing and i was hoping this plugin to replace colreorder.
feel free to maintain this plugin or both if you think it's better.
by the way, why don you say it's not a optimal solution to column resizing ? do you have a better solution ?
last thing, i still dont receive any notification of this thread, so it's difficult to follow your answers.
1) I am also experiencing that problem that when I click a column header to sort, the data goes into the wrong columns. I am using ajaxSource and my server handler is returning the data with the columns in the order specified by sColumns which is the visible order.
2) I am also using infinite scrolling with a fixed height table. Is there any way to get the horz scrollbar to appear such that the vertical scrollbar is not pushed off the right side of the screen?
Our app uses DataTables 1.7.5 and when I try to plug in ColReorderWithResize.js available from http://datatables.net/extras/thirdparty/ColReorderWithResize/, it gives the alert saying that 'Data tables version should be 1.9.0 or greater'.
And when i download the latest datatables version, then my existing features are lost.
So, is there any other way where I can do this. Basically, the requirement is to resize the column length and also to reorder the display of columns dynamically using drag and drop. And the version that we are currently using is 1.7.5
we found some solution for saving state of tables with colReoder, but now sorting is not working properly.
This is what we did:
Instead of:
[code]
//Update the internal column index, since columns are actually being re-ordered in the internal structure
oSettings.aoColumns[i]._ColReorder_iOrigCol = i;
[/code]
we wrote:
[code]
//Update the internal column index, since columns are actually being re-ordered in the internal
oSettings.aoColumns[i].my_ColReorder_iOrigCol = i;
[/code]
Then in part of code:
[code]
this._fnConstruct();
/* Store the instance for later use */
[/code]
We added:
[code]
this._fnConstruct();
var i, iLen;
for (i = 0, iLen = this.s.dt.aoColumns.length; i < iLen; i++) {
this.s.dt.aoColumns[i]._ColReorder_iOrigCol = i;
}
/* Store the instance for later use */
[/code]
Then instead of:
[code]
/* Mark the original column order for later reference */
this.s.dt.aoColumns[i]._ColReorder_iOrigCol = i;
[/code]
We wrote:
[code]
/* Mark the original column order for later reference */
this.s.dt.aoColumns[i].my_ColReorder_iOrigCol= i;
[/code]
I had some problems with initial column order:
the events from the header did not match the right column in the body.
To fix that, i modified _fnOrderColumns:
[code]
/**
* Set the column order from an array
* @method _fnOrderColumns
* @param array a An array of integers which dictate the column order that should be applied
* @returns void
* @private
*/
"_fnOrderColumns": function ( a )
{
////////////
//J Wenner unbind events before new binding
$(document).unbind( 'mousemove.ColReorder' );
$(document).unbind( 'mouseup.ColReorder' );
///////////
if ( a.length != this.s.dt.aoColumns.length )
{
this.s.dt.oInstance.oApi._fnLog( oDTSettings, 1, "ColReorder - array reorder does not "+
"match known number of columns. Skipping." );
return;
}
We are using jquery datatable version 1.9.0 in our project and it works cool. Thanks for it.
Along with it we are also trying to use ColReorderWithResize plugin (version 1.0.7) which needs jquery datatable version 1.9.3 or greater. Owing to certain restrictions we are not able to upgrade to datatable version 1.9.3 from 1.9.0.
Is there any specific dependency on this version of datable or things should work fine with 1.9.0 version too?
I have tried to integrate stanko and mtx changes. The horizontal column ordering state save works fine, but if we order the data vertically by clicking a column, state saving goes crazy, and each time I update the page, data is ordered by a different criterion (column). Anyone knows how to solve this? It would be very helpful.
Like axaceuta, im encountering sorting issues. Once i integrated MTX changes into the latest version of ColReorderWithSize, my saved sort doesn't get applied properly so it ends up sorting on another column.
For example, say i have 5 columns ('Browser', 'Rendering engine', 'Platform','Engine version','CSS Grade) and i move Platform to Position index 1 (So it is the second column, instead of the third) and i sort on it. It works well, my sort is good. If i reload the page, my state gets loaded and my columns are replaced properly (Platform @ index 1, Rendering Engine @ index 2) but the sorting is now done on Rendering Engine.
Analyzing the states, here's what i found:
No reorder, just 1 sort on column index 5 (6th column) : "aaSorting":[[5,"asc",0]]
NORELOAD - I move the column to index 1 (2nd column) : "aaSorting":[[4,"asc",0]] (I'm a bit puzzled about this one!)
NORELOAD - I move the column to index 2 (3rd column) : "aaSorting":[[2,"asc",0]]
NORELOAD - Back to index 1 : [[1,"asc",0]]
Reload (F5) : The state that gets saved after loading : "aaSorting":[[5,"asc",0]] and the sorted column is now the column that was originally at index 1 but is now at Index 2.
For the purpose of the test, i re-sorted on the column with the originaIndex of 5 (that is now at 1) and moved the wrong-column that got sorted (OriginalIndex 1): [[1,"asc",0]]
Reload (F5) : The wrong-column gets sorted again.
My conclusion is : Save is done on "absolute position", load is done on "pre-reorder-position".
I would fix it myself if i had the slightest idea of how the sorting state saving is done, but it's pretty arcane to me right now... if anybody has a workaround, id be glad to hear it... ill try to dig deeper and figure it out myself but that may take quite some time :/
Does it work correctly with just ColReorder? The resizing variant is not supported as part of this project - it is community provided, so it is possible that it just needs to be synced up to the latest ColReorder release.
Replies
Look for "Move the internal array elements" in the code.
/*
* Move the internal array elements
*/
/* Columns */
fnArraySwitch( oSettings.aoColumns, iFrom, iTo );
// DAM fix issue where column doesn't sort properly after reordering
oSettings.aoColumns[iTo].aDataSort[0] = iTo;
oSettings.aoColumns[iFrom].aDataSort[0] = iFrom;
// DAM
Add the code between //DAM comments and it should work correctly.
David
Look in the source for "are we on the col border" and modify the code as follows. Change the value of 10 to anything you want. The original code is shown as a comment.
/* are we on the col border (if so, resize col) */
// DAM make it easier to resize columns
//if (e.pageX == Math.round(offset.left + nLength))
if (Math.abs(e.pageX - Math.round(offset.left + nLength)) <=10)
{
$(nThTarget).css({'cursor': 'col-resize'});
}
else
$(nThTarget).css({'cursor': 'pointer'});
}
Hope this works for you.
The solution that @froind offered:
this.s.dt.oInstance.fnColReorder(0,1);
this.s.dt.oInstance.fnColReorder(1,0);
can be accomplished this way which I think might be a little cleaner. Look for "Mark the original column" and modify as follows:
/* Mark the original column order for later reference */
this.s.dt.aoColumns[i]._ColReorder_iOrigCol = i;
// DAM
$(this.s.dt.aoColumns[i].nTh).click(function(event) {
if ($(event.target).css('cursor') === 'col-resize'){
console.log('cancel bubble');
event.cancelBubble = true;
event.stopImmediatePropagation();
}
});
//DAM
New code is between //DAM tags
Hope this helps someone.
thanks for all your remarks, i will try to work on this project today and will keep you notified of the advancement
i will send my updates to Allan this afternoon and see with him if we need to have 2 different plugins for ColReorder.
Thanks a lot to Martin for all the corrections.
List of updates :
1) rebased ColReorderWithResize on v1.0.5 of ColReorder
=> now you have visual feedback with reorder
2) integrated Martin's corrections :
a. Made the "hot area" for resizing a little wider (it was a little difficult to hit the exact border of a column for resizing)
b. Resizing didn't work at all when using scroller (that plugin splits the table into 2 different tables: one for the header and another one for the body, so when you resized the header, the data columns didn't follow)
c. Fixed collateral effects of sorting feature
3) added 2 new init options allowReorder and allowResize, both default to true, to control functionnalities of the plugin
Thanks
Any status on the pending update cbattarel? I'm planning on putting some kind of hook into ColReorderWithResize to make it work nicely with ColumnFilterWidgets (https://github.com/cyberhobo/ColumnFilterWidgets) , but I would like to hold off until the update you posted 10 days ago goes through so that the resizing works with sScrollY.
Allan
Allan
Just one hitch: the resize doesn't update the footer row, as used in the Column Filtering examples. The footers are reordered correctly, but not resized. However, after paging up or down, the footer does take on the new column size. Any ideas?
David
Many thanks for this plugin!
One issue (im not sure if its only me):
For soem reason, is not saving the correct "statesave" order...
No matter how i reorder the columns, the statesave ALWAYS saves the initial order.
So for example, if i reorder from 1,2,3,4,5 --> 4,2,1,3,5,
the state that is saved will STILL be 1,2,3,4,5. Hence when i refresh, my col reordering is reset...
Is this a bug or is it supposed to be like that?
Also, any chance you can add in a "state save" for the new sizes of columns as well?
Thanks otherwise for the great work :)
dont forget to thanks Martin who did a great job on this last version and of course Allan who wrote most of the code and manage all the datatables project.
I will look at the issues you pointed in the next weeks since i will develop a new app using this plugin and need also the features you requested.
keep in touch ;-)
great plugin, most def a needed and welcome addition
Allan
The code I use:
[code]
$(document).ready(function() {
var oTable = "";
$("#tabs").tabs({
"show": function(event, ui) {
oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
if ( oTable.length > 0 ) {
oTable.fnAdjustColumnSizing();
}
}
});
$('table.display').dataTable({
"bJQueryUI": true,
"bStateSave": true,
"asStripClasses": [],
"sScrollY": 800,
"bScrollCollapse": true,
"sScrollX": "100%",
"bDeferRender": true,
"bPaginate": false,
"aoColumnDefs": [
{ "sWidth": "20%", "aTargets": [ 0 ] }
],
"sDom": '<"clear">iflrt'
});
new FixedHeader ( oTable );
});
[/code]
An intersting thing is if I change th style for th td font-size from 10px to say 12px the header column sizes lines up with the data, but the data does not fit in the screen and a horizontal scroll bar appears. Perhaps the forcing of column resizing with the larger font causes the column sizes to match up.
I also wanted the ColResize, hence this plugin would be what I was looking for if it was up-to-date, before I convince myself I need to try and implement it myself, ain't there a chance to update the ColReorder in this plugin?
Thank you authors, anyway, your code will help me do it, eventually if no one answers my prays :)
Allan
there are options in colreorderwithresize plugin to allow reorder and/or resizing and i was hoping this plugin to replace colreorder.
feel free to maintain this plugin or both if you think it's better.
by the way, why don you say it's not a optimal solution to column resizing ? do you have a better solution ?
last thing, i still dont receive any notification of this thread, so it's difficult to follow your answers.
1) I am also experiencing that problem that when I click a column header to sort, the data goes into the wrong columns. I am using ajaxSource and my server handler is returning the data with the columns in the order specified by sColumns which is the visible order.
2) I am also using infinite scrolling with a fixed height table. Is there any way to get the horz scrollbar to appear such that the vertical scrollbar is not pushed off the right side of the screen?
I have problem with saving state (bStateSave:true), order of columns is not memorized after refresh.
ColReorder is working perfect.
I see that ColReorderWithResize is v1.0.5 while ColReorder is v1.0.6, can be that a problem?
Our app uses DataTables 1.7.5 and when I try to plug in ColReorderWithResize.js available from http://datatables.net/extras/thirdparty/ColReorderWithResize/, it gives the alert saying that 'Data tables version should be 1.9.0 or greater'.
And when i download the latest datatables version, then my existing features are lost.
So, is there any other way where I can do this. Basically, the requirement is to resize the column length and also to reorder the display of columns dynamically using drag and drop. And the version that we are currently using is 1.7.5
we found some solution for saving state of tables with colReoder, but now sorting is not working properly.
This is what we did:
Instead of:
[code]
//Update the internal column index, since columns are actually being re-ordered in the internal structure
oSettings.aoColumns[i]._ColReorder_iOrigCol = i;
[/code]
we wrote:
[code]
//Update the internal column index, since columns are actually being re-ordered in the internal
oSettings.aoColumns[i].my_ColReorder_iOrigCol = i;
[/code]
Then in part of code:
[code]
this._fnConstruct();
/* Store the instance for later use */
[/code]
We added:
[code]
this._fnConstruct();
var i, iLen;
for (i = 0, iLen = this.s.dt.aoColumns.length; i < iLen; i++) {
this.s.dt.aoColumns[i]._ColReorder_iOrigCol = i;
}
/* Store the instance for later use */
[/code]
Then instead of:
[code]
/* Mark the original column order for later reference */
this.s.dt.aoColumns[i]._ColReorder_iOrigCol = i;
[/code]
We wrote:
[code]
/* Mark the original column order for later reference */
this.s.dt.aoColumns[i].my_ColReorder_iOrigCol= i;
[/code]
and on the end, instead of:
[code]
/* Sorting */
for ( i=0 ; i
the events from the header did not match the right column in the body.
To fix that, i modified _fnOrderColumns:
[code]
/**
* Set the column order from an array
* @method _fnOrderColumns
* @param array a An array of integers which dictate the column order that should be applied
* @returns void
* @private
*/
"_fnOrderColumns": function ( a )
{
////////////
//J Wenner unbind events before new binding
$(document).unbind( 'mousemove.ColReorder' );
$(document).unbind( 'mouseup.ColReorder' );
///////////
if ( a.length != this.s.dt.aoColumns.length )
{
this.s.dt.oInstance.oApi._fnLog( oDTSettings, 1, "ColReorder - array reorder does not "+
"match known number of columns. Skipping." );
return;
}
for ( var i=0, iLen=a.length ; i
We are using jquery datatable version 1.9.0 in our project and it works cool. Thanks for it.
Along with it we are also trying to use ColReorderWithResize plugin (version 1.0.7) which needs jquery datatable version 1.9.3 or greater. Owing to certain restrictions we are not able to upgrade to datatable version 1.9.3 from 1.9.0.
Is there any specific dependency on this version of datable or things should work fine with 1.9.0 version too?
Thanks a lot.
For example, say i have 5 columns ('Browser', 'Rendering engine', 'Platform','Engine version','CSS Grade) and i move Platform to Position index 1 (So it is the second column, instead of the third) and i sort on it. It works well, my sort is good. If i reload the page, my state gets loaded and my columns are replaced properly (Platform @ index 1, Rendering Engine @ index 2) but the sorting is now done on Rendering Engine.
Analyzing the states, here's what i found:
No reorder, just 1 sort on column index 5 (6th column) : "aaSorting":[[5,"asc",0]]
NORELOAD - I move the column to index 1 (2nd column) : "aaSorting":[[4,"asc",0]] (I'm a bit puzzled about this one!)
NORELOAD - I move the column to index 2 (3rd column) : "aaSorting":[[2,"asc",0]]
NORELOAD - Back to index 1 : [[1,"asc",0]]
Reload (F5) : The state that gets saved after loading : "aaSorting":[[5,"asc",0]] and the sorted column is now the column that was originally at index 1 but is now at Index 2.
For the purpose of the test, i re-sorted on the column with the originaIndex of 5 (that is now at 1) and moved the wrong-column that got sorted (OriginalIndex 1): [[1,"asc",0]]
Reload (F5) : The wrong-column gets sorted again.
My conclusion is : Save is done on "absolute position", load is done on "pre-reorder-position".
I would fix it myself if i had the slightest idea of how the sorting state saving is done, but it's pretty arcane to me right now... if anybody has a workaround, id be glad to hear it... ill try to dig deeper and figure it out myself but that may take quite some time :/
Allan