Set Column Widths Back to Default Values After Resize

chbocca

Hi again.

Been successfully using Daniel Hobi's colResize function for a year now.

After columns widths are changed, I'm trying to reset to original "default" values.

Getting the new column widths after resize was easy enough using jQuery css function.

Click "Get Column Widths" button in my test example.

But approach/code I'm using to set columns widths back to default values just not working.

Click "Set Column Widths" button and I get no change.

Basically, trying to update width css via column class with jQuery then use table.columns.adjust().draw().

What silly thing am I doing wrong?

As always, very much appreciate any help from the board.

Thanks, c

kthorngren

Looking at the colResize.js code it looks like there is a colResize.reset() API - look at the bottom of the page. Not sure what its supposed to do but maybe thats the route you need to take. Not sure if this API is documented. Have you asked the plugin author about how to reset back to the default settings?

Kevin

chbocca

Thank you Kevin! Yes, I asked Daniel first but no reply yet.

Yeah, I see the reset. I could also just refresh to get back to "default".

While I use the "default" settings in example, I ultimately want users to be able to save the column width settings after resize to their profile preferences and then apply them to future tables.

So, I need to be able to apply their saved column widths. I just have not figured out how to do that in a dynamic way.

chbocca

Should probably have chosen better title, like: Set Column Widths Dynamically!

allan

I don't think that plug-in has that ability I'm afraid. It would probably need to be modified to add such a feature.

Allan

chbocca

Thank you, Allan.

Any thought on why the approach taken in my demo is not working?

Daniel did get back to me too. He thought the selector was suspect, but I tried using the th:eq() approach that I use to get the column widths. Same result. I can't set columns dynamically.

Will keep researching. I did find link below that may help:

http://live.datatables.net/coqiwimi/1/edit

c

allan

Any thought on why the approach taken in my demo is not working?

Apologies - I'm afraid I can barely keep up with the support for my own software (in fact often can't at all) - I can't debug a third party library at the moment. If I get a gap I'll take a look.

Allan

chbocca

Thanks Allan. It's OK. Understand. Think I figured it out.

Here's link to working demo.

I ended up treating columns() as an object-based variable:

var table = $('#example').DataTable( {
   columns: columns_options
});

where

var header = ["name", "position", "office", "age", "start", "salary"];
var columns_options = [];
for (var j = 0; j < header.length; j++) {
   columns_options.push({ width: widths[checkOrder[j]] });
}
var checkOrder = table.colReorder.order(); 
var widths = []; 
for (var j = 0; j < header.length; j++) {
   widths[j] = jQuery('#example thead th:eq(' + checkOrder[j] + ')').css('width');
}

What's good is now column widths after colResize can be saved in user profiles, then retrieved and applied via user preference. So, once column width are set and saved, they do not need to be resized on say reload or in my case, a new search.

In working demo:

1) change column width via colResize (and order, if you like),

2) click "Save widths" button ... you will see current widths and order,

3) use colResize again to change widths (and order, if you like),

4) click "Apply saved widths" to re-set table to stored column widths and order.

It's a bit of a hack, I know, but I think it sufficiently illustrates that column widths can be changed dynamically in datatables and another good fall-out from Daniel's plugin!

c

allan

Nice one! Thanks for sharing that with us.

Allan