sScrollY creates duplicate thead/tr

fbas

I can't get rid of the duplicate header created when sScrollY is enabled on my table.

I see in the code that css height is set to 0px in the thead's tr and td's, but the row still shows (chrome, and firefox 4).



tried using display: none, but that clobbers the column widths needed to align the header and the table columns.

anyone else having this issue, or have a solution?

allan

Can you link us to your page which is going this please? As you noted the thead in the scrolling part of the table is needed to ensure that the columns align correctly - hence why it is there - but DataTables should be hiding it by adding CSS overrides, so there must be something overriding that override :-)

Allan

fbas

I don't have a good/convenient server space to put the page up (you may notice in the image it's running off my local disk). I figure it must be something in css or other code overriding it, but haven't found any yet.

Thanks for the reply, I'll keep searching.

allan

Oops - sorry missed that in the image :-). Firebug should be able to give a clue as to what is forcing the header element to the given height. If you find out could you let me know so I can see if I should be adding something else to how DataTables handles this?

Thanks!
Allan

fbas

Sure enough, I had some CSS issue. Trying to be clever, I used :after to use a unicode character to replace the ascending and descending images. (.sorting_asc, .sorting_desc)

Now that I found that, I can remove those classes from the hidden thead/tr columns and shrink that row.

fbas

Is there a reason that DataTable leaves the sorting* css classes in the original header (the one that becomes the collapsed row)? If it's not needed, you could pull those out.

Just about every operation I did (moving columns, sorting by column, etc) refreshed that row with the css classes so the row kept coming back. Rather than hook into various events and remove the sorting* classes myself, I gave up on the :after and went back to using the image indicators.

[one of the reasons I wanted to ditch the images is that the set I downloaded had some bad transparency or bit-depth - they were indexed PNG-8 or something. I like that the photoshop file was also included so I could quickly remake the images in PNG-24, plus gave me an excuse to experiment with the colors.]

allan

The classes are left because they might have padding on them which would effect the width. Also, I didn't really expect them to be visible so it didn't matter too much what class they had on them :-).

I think you are right about the icons that DataTables comes with by default - they are a bit rubbish. I created a couple of new ones for this blog post which can be easily modified: http://datatables.net/blog/Creating_beautiful_and_functional_tables_with_DataTables . Or just any image can be used for the background. Using the jQuery UI option also gives a few more options for the styling since it adds a span element - even if you don't actually use a jQuery UI theme.

Allan

fbas

Thanks, I'll look more into the options.

Your datatables are a brilliant product and the plugins and options are pretty astounding.

I'm using another package, J Editable or something, to allow users to modify cells in my tables, and I'll use ajaxian methods to update server tables. If your package did that, I wouldn't need anything else.

At this point, the most trouble I'm having with the tables is there's some jittering when I'm using a fixed column on the left side and scrolling the other columns. I'm pretty sure it's a javascript performance issue that will get smoother over time (and your example tables look good enough, so my css formatting options might be exascerbating it a little). At some point I'll have the page(s) up on a server so you can take a look if you're interested.

Thanks for the help. I expect I'll be using these tables for a long time. The only thing better would be for browsers/w3c to offer dynamic table elements.

allan

Thanks for your kind words :-)

There is a plug-in for DataTables from Jovan Popovic which wraps up jEditable to try and make the integration of it with DataTables a little easier: http://code.google.com/p/jquery-datatables-editable/ . I'll also be adding a blog post soon about how to roll your own little inline editing features in DataTables.

Allan