[HTML/CSS/JS] Tabelheader fixed plaats

[JKVA]

Een klant van mij heeft gevraagd om een impactanalyse voor een naar mijn idee vreemde feature. Het zit zo:

We gebruiken HTML tables om overzichten mee te genereren. Dat is de standaard manier van werken binnen JavaServer Faces.

Echter, deze klant werkt met overzichten waarin vele records komen te staan en na een eind scrollen is deze de weg kwijt.

Oplossing: De header laten staan en de content laten scrollen.

Klinkt eenvoudig, maar dat is het tot nu toe niet, aangezien het mij nog niet gelukt is om de content te laten scrollen terwijl de header blijft staan.

Ik kan wel een paar lelijke oplossingen bedenken, zoals de header en data over twee tabellen verdelen, maar dan zit je weer met het probleem dat de breedtes van de headers niet matcht met die van de datakolommen.

Ik kan ook een custom component maken met divs, waarvan er eentje scrollt, maar dit is een flinke klus en kost dus veel geld. Ik zit dus als het ff kan te zoeken naar een relatief standaard oplossing.

Iemand een idee?

[disjfa]

Om de zoveel regels headers herhalen
Fixed aantal regel en pagina nummering.

[JKVA]

Helaas, dat zit ook niet standaard in die component die we gebruiken. Paginering is niet mogelijk, aangezien die grote lijsten noodzakelijk zijn om er snel mee te kunnen werken. (acties op een groot deel van de lijst...)

Ze willen momenteel alleen weten hoeveel moeite die oplossing met de fixed header kost.

[Victor]

Ik ben toevallig afgelopen vrijdag bezig geweest een oplossing voor ditzelfde probleem te vinden. Ik kwam tijdens mijn speurtocht deze vrije nette oplossing tegen: http://www.imaputz.com/cssStuff/bigFourVersion.html

[-FoX-]

Een vrij simpele oplossing is om dit met CSS uit te werken door een height en een 'overflow: scroll' toe te voegen aan de tbody element van je table.

[Borizz]

-FoX- schreef op maandag 07 augustus 2006 @ 18:45:
Een vrij simpele oplossing is om dit met CSS uit te werken door een height en een 'overflow: scroll' toe te voegen aan de tbody element van je table.

Helaas is de implementatie in sommige browsers (IE ) hiervan nogal bedroevend...

[JKVA]

@reacties: Ik merk nu idd dat je een tbody een overflow: scroll kunt geven. Ik had eigenlijk verwacht dat dit niet zou gaan en had er ook niet over nagedacht.

King_Louie's link is echter wel zeer handig. Ik ga morgen meteen eens kijken of dat een beetje te integreren valt met de bestaande code.

@Borizz: In IE6 werkt het anders prima... Of doel jij op 5.5 / 7?

[CH4OS]

Misschien kan Pure CSS Scrollable Table with Fixed Header je helpen?
Deze werkt namelijk gewoon in FF en IE, zonder JS...

Ik zit alleen héél erg te slapen, King Louie heeft dezelfde URL gegeven
* CH4OS sloom isch

[ Voor 20% gewijzigd door CH4OS op 08-08-2006 08:55 ]

[BalusC]

Gebruik je datatables? Zo ja, dan zou je paginering kunnen overwegen. Hier zijn componenten voor. Als je met IBM faces werkt, dan kun je een hx:pager gebruiken, bijvoorbeeld hx:pagerWeb.

XML:

<h:datatable rows="50">
    <f:facet name="footer">
        <hx:panelBox">
            <hx:pagerWeb />
        </hx:panelBox>
    </f:facet>
</h:datatable>

Anders moet je eens kijken naar MyFaces datascroller

edit:
Ik zie nu dat paginering niet gewenst is Sja, ik ken helaas geen componenten die dat mogelijk maakt.

Anders probeer je zoiets:

XML:

<h:panelGrid columns="1">
    <h:panelGrid columns="3">
        <h:outputText value="id" />
        <h:outputText value="name" />
        <h:outputText value="value" />
    </h:panelGrid>
    <h:panelGroup style="display: block; width: 100%; height: 500px; overflow: auto;">
        <h:dataTable value="#{myBean.list}" var="item">
            <h:column>
                <h:outputText value="#{item.id}" />
            </h:column>
            <h:column>
                <h:outputText value="#{item.name}" />
            </h:column>
            <h:column>
                <h:outputText value="#{item.value}" />
            </h:column>
        </h:dataTable>
    </h:panelGroup>
</h:panelGrid>

En dan eventueel een beetje met CSS spelen om de widths en heights goed te krijgen.

[ Voor 98% gewijzigd door BalusC op 08-08-2006 09:41 ]

[JKVA]

Ik zit idd te kijken naar die oplossing van King_Louie. Volgens mij is dat met h:dataTable wel te doen...

Iets van:

Cascading Stylesheet:

.overzichtje { ... }
.overzichtje thead { ... }
.overzichtje tbody {
    height: 500px;
    overflow: auto;
    ...
}

XHTML:

<h:dataTable class="overzichtje" ...>
    <h:column ... />
    <h:column ... />
</h:dataTable>