FixedHeader + fnSetColumnVis?

shaneisme

Hey all - I've got a very large table and need a way to hide columns.

I'm running the following options:

[code]
var oTable = $('#compare').dataTable({
"bInfo": false,
"bPaginate": false,
"bLengthChange": false
});
new FixedHeader( oTable, { "left": true} );
[/code]

I'm using the code in the following example: http://www.datatables.net/examples/api/show_hide.html

[code]
function fnShowHide( iCol )
{
/* Get the DataTables object again - this is not a recreation, just a get of the object */
var oTable = $('#compare').dataTable();
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis( iCol, bVis ? false : true );
}
[/code]

And, if I add the following to an anchor:

[code]onclick="fnShowHide(2);"[/code]

...nothing at all happens.

Using the search function works perfectly, as does sort.

I'm using jQuery 1.8.2.

Is there another way I need to do this using FixedHeader? Or is there probably something else I'm doing wrong?

allan

Can you link us to a test case showing the problem please? This should be working. Also if you aren't already, try using the FixedHeader nightly from the downloads page.

Allan

shaneisme

Sure - I installed the nightly, but now the left bar isn't lined up correctly.

http://promos.asus.com/us/z87/comparison/branch.1.1.0.asp

Pardon the mess, this is just a proof of concept :)

allan

I'm getting a Javascript error on the page when I click the 'Chipset' toggle, which is pointing at this function call:

[code]
(function(event) { fnShowHide(1);
})
[/code]

fnShowHide is undefined.

Was that error present with the old version as well? Have you defined that function anywhere?

Not sure what is causing the misalignment - I'll try to look into it.

Allan

shaneisme

That's strange, the function is defined on the page (per my OP).

Perhaps there's a scope issue in there somewhere? I'll dig as well.

Edit - it was a scope issue! But now the column is hiding correctly, however the FixedHeader column is not.

Edit 2 - Switching back to 2.0.6 on FixedHeader works as intended, but it doesn't seem to remember the width.

Edit 3 - Using:

[code]
"bAutoWidth": false
[/code]

Solves this problem.

So basically, not using the nightlies I'm working fine :)

If you'd like me to test another version please feel free, it's the least I could do.

shaneisme

Side note - I've looked through a lot of examples and posts about hiding rows. I couldn't find any easier than just doing a jQuery hide on click. Unfortunately, due to using FixedHeaders, it's of course only hiding the without hiding the generated left column.

If I start the off hidden upon DOM load, the left column is rendered correctly. If I ask for the table to be re-drawn I lose all the filters I put in place by hiding columns.

Is there an example that you can think of I can use to basically provide the exact same functionality you've helped me do for columns for rows as well? Basically, on click of an anchor separate from the row itself, the row[id] hides.

Edit - never mind, I see FixedHeader brings with it any classes, so I'll just do that to call everything.

(I should post 5 minutes after I think I have a question from now on...)

[code]
Toggle
[/code]

JS:

[code]
function hideRow(classname) {
if ($(classname).is(':visible')) {
$(classname).css('display','none');
} else {
$(classname).css('display','table-row');
}
}
[/code]

shaneisme

I'm adding a functionality to resize the table's parent div when hiding / showing columns so the column widths will remain the same size as we go.

As of right now, I declare the width of the parent, and then I use some basic math to add or subtract pixels from the parent.

My problem is when showing a column again using fnSetColumnVis, I can't seem to get the width of the column that's hidden... instead I get the column width next to it when I do something like this:

[code]
var width = $('#compare th').eq(iCol).width();
[/code]

I tried moving it after the fnSetColumnVis call, but it doesn't seem to work no matter what I do.

Is there a built-in function to keep track of the columns hidden by fnSetColumnVis?

Is there a simpler solution for me in general (am I doing things the hard way)?

Current version: http://promos.asus.com/us/z87/comparison/branch.1.2.0.asp

shaneisme

I solved my issue with a work-around. I created an array of the widths using "$.map" and using that information to add and subtract a set amount of pixels based on its original render.

Is this information already stored in an array when data tables is called? If so, I can use that instead of taking up more memory with my array.