Progressive enhancement (and bAutoWidth bug)
Progressive enhancement (and bAutoWidth bug)
jnthnlstr
Posts: 27Questions: 0Answers: 0
Hello,
I'm a big fan of progressive enhancement, so I like my pages to display nicely without JavaScript. In the case of the table I'm enhancing using DataTables, there are several columns in the HTML that I choose not to display if JavaScript is turned on and DataTables can do its thing (I've made a little menu for people to hide/show them).
I find that DataTables takes a while to get going and do the processing, when you put its script tag at the end of the body tag (size of library is one factor). As a result, you can see the un-enchanced table for a few seconds before it is made good. The method I'd normally use to get around this is to add a class '.js' to the html tag as the only action in the head (the html tag being the only tag available before the DOM has loaded), and then hide elements I don't want seen un-enhanced using CSS.
The above works fine if you don't use: [code]bAutoWidth: true[/code] If you do, the table bunches up to the left of the screen, as shown in the this screenshot:
http://img.skitch.com/20090915-c3kfm2bqsr1sj87mjaa3fews7e.jpg
For now, I'm making do without AutoWidth, but it would be great to able to use that again.
Thanks,
J.
I'm a big fan of progressive enhancement, so I like my pages to display nicely without JavaScript. In the case of the table I'm enhancing using DataTables, there are several columns in the HTML that I choose not to display if JavaScript is turned on and DataTables can do its thing (I've made a little menu for people to hide/show them).
I find that DataTables takes a while to get going and do the processing, when you put its script tag at the end of the body tag (size of library is one factor). As a result, you can see the un-enchanced table for a few seconds before it is made good. The method I'd normally use to get around this is to add a class '.js' to the html tag as the only action in the head (the html tag being the only tag available before the DOM has loaded), and then hide elements I don't want seen un-enhanced using CSS.
The above works fine if you don't use: [code]bAutoWidth: true[/code] If you do, the table bunches up to the left of the screen, as shown in the this screenshot:
http://img.skitch.com/20090915-c3kfm2bqsr1sj87mjaa3fews7e.jpg
For now, I'm making do without AutoWidth, but it would be great to able to use that again.
Thanks,
J.
This discussion has been closed.
Replies
I couldn't agree more - progressive enhancement is absolutely the way forwards! The core idea behind DataTables is to ensure that it will work with progressive enhancement - anything else (server-side processing for example) is just a bonus :-)
Are you using the gzip version of DataTables? It's only 13Kb, which can be a huge bandwidth saving - particularly if you are loading the javascript after the DOM... One option might be to load the JS library in the head tag, and then initialise it at the end of the body.
The reason that bAutoWidth is causing you issues is that if you have your 'js' class hiding the table - then the browser isn't calculating the width of the table (since it's not in the flow) and thus there are no widths for DataTables to work with. This has been discussed on the forum a few times:
http://datatables.net/forums/comments.php?DiscussionID=490
http://datatables.net/forums/comments.php?DiscussionID=491
http://datatables.net/forums/comments.php?DiscussionID=598
The next version of DataTables will sanity check if there are values to use for the calculation - but you will still run into problems since there are no absolute values for it to work with.
One option to get around this is to use visibility:hidden - so the table is still in the document flow, but not visible to the user. Not great - but perhaps better than nothing?
Another thing that can be done to significantly speed up DataTables, when you are using a large amount of data, is to disable the sorting classes: http://datatables.net/usage/features#bSortClasses - as this is quite DOM intensive.
Regards,
Allan
Great stuff with the visibility:hidden trick, did the job for me!
J.