Dynamincally changing column widths

Al Hart

We want to use Datatables in two separate "panes" in an iPad App.

One Pane will show just the column headers - as iPad code - not an HTML page and the other pane will show the column data (either with headerers, or hopefully with the headers invisible). That way the user can always see the column headers as he "swipes" the iPad to scroll down the table.

Along with this feature, we would like to let the user dynamically stretch the column headers. We plan to do by toggling move-icons at the header edges and letting the suer drag them.

We would like the iPad headers to issue a Javascript command to the HTML page to dynamically change the column widths without having to reload the page (We could store the column widths in a cookie and reload the page, but it would be much more convenient to change the column widths and redisplay the table without having to reload the data).

Any thoughts?

And, is there a way to change the column widths on the fly (not at startup)?

allan

Hi Al,

I'm afraid I'm not entirely up on iPad targeted development, so I perhaps can't answer specifically about the fixed header implementation - although I'm most interested in how that has been achieved!

Given that you are using DataTables without its scrolling features (I presume, since I seem to recall inner scrolling elements not scrolling?) but rather just a plain old HTML table, what you can do is simply resize the table columns using DOM methods. Something like $('#example thead th:eq(0)').width(100); for example would set the column size for the first column. There are a number of "gotchas" however to consider - setting the width to something smaller than is possible for the content in the column will result in the width being recalculated by the browser - a min-width could be used perhaps. Likewise extending to far might mean that there is no width left for the other columns, another consideration to make. However, the basic idea is just to set the width using DOM / jQuery methods.

If you were using the scrolling features it gets a bit more tricky :-). Your need to manipulate the sWidth parameter for the columns and then redraw the table... There is also the API function fnAdjustColumnSizing which will recalculate optimal column sizing, which might be of interest.

Regards,
Allan

Al Hart

I'll attach an image of the iPad app when we get it going. The column headers will be in a non-HTML iPad pane above the HTML column display. We have the iPad columns resizing well now - but need to adjust the HTML table to match them. We are able to call Javascript in the HTML page from the non-HTML pane without having to reload the page.

I tried your suggested line, exactly as written, in a DataTables example htm (see below)
(This level/format of coding is beyond my usual Javascript skills)

When I execute the set_column() function, I get this error message:

Unknown pseudo-class or pseudo-element: 'eq'

Can you help with the exact syntax I should be using?

[code]
DataTables example

@import "../DataTables-1.7.4/media/css/demo_page.css";
@import "../DataTables-1.7.4/media/css/demo_table.css";






$(document).ready(function()
{
$('#example').dataTable(
{
"aaSorting": [[ 4, "desc" ]]
}
);

} );

function set_column(icol , iwid)
{
//alert("icol: " + icol + " iwid: " + iwid);
$('#example thead th:eq(0)').width(100);
}




Set 50
Set 100
Set 200




Rendering engine
Browser
Platform(s)

Engine version
CSS grade


[/code]

Al Hart

I changed the line to change the column widths to:

[code]
$('#example thead th:eq(' + icol + ')').width(iwid);
[/code]

in order to actually try to change the columns. It does change the column widths, but I still get the same error message.

I get this error message in the Firefox error console. IE does not seem to give any error messaged. Still, any advice would be appreciated.

Al Hart

Finally,

The three buttons to change the width, but don't set it to exactly what I want (e.g. 85, 130 and 215 instead of 50,100 and 200), and altering the width of the browser windows alters the widths slightly.

Would you consider adding the code above to the a sample datatables .htm and trying it out?

allan

I'm realise surprised that you are getting an error about the :eq selector - it's just a standard part of jQuery: http://api.jquery.com/eq-selector/ . I presume your table does have an ID of 'example', or you've change that in the running code?

If that doesn't work you could do:

[code]
$('#example thead th')[icol].style.width = iwid+'px';
[/code]
which is basically the same thing.

With regard to the three buttons - I'm not quite 100% clear on what you are looking for sorry. Is it just three buttons and when each one is clicked all table columns have that one width applied to them? How does that interface with the drag resizing of the columns?

Regards,
Allan