Sobald im SharePoint 2010 in einer Liste etwas mehr als 30 Zeilen angezeigt werden oder auf einer Zeile noch ein Bild angezeigt, erscheint ein Scrollbar. Lästig ist dabei, dass beim nach unten Scrollen die Kopfzeile der Tabelle verschwindet bzw. nicht mehr im sichtbaren Bereich ist. Bei umfangreichen Tabellen verliert man dann schnell den Überblick.
Leider gibt es keine eingebaute Funktion wie das „Fenster einfrieren“ im Microsoft Excel. Aber mit jQuery und einem jQuery Script lässt sich diese Funktion nachbauen. Im Internet gibt es schon ein Paar solche Lösungsansätze um Tabellen Kopfzeile zu fixieren, wie SharePoint 2010 jQuery: List Scrolling View with Frozen Header oder das jQuery Plugin .FixedHeaderTable(), aber keine davon funktioniert richtig zusammen mit SharePoint 2010.
Die Demo von Amit Phule sieht aufgrund der doppelten Scrollbars unschön aus und ich konnte diese gar nicht 1:1 zum Laufen bekommen. Das .FixedHeaderTable() Plugin versagt, weil die SharePoint HTML-Tabellenstruktur nicht den Anforderungen entspricht (THEAD fehlt), und wenn man dieses Problem mit etwas jQuery löst, funktionieren die Sortier- und Filter-Menüs auf den Spalten gar nicht mehr.
Darum hier eine funktionierende Alternative von mir, welche mit jQuery die Kopfzeile kopiert und eingefriert einblendet, wenn nötig. Mein Script passt die dynamischen Tabellen-Spaltenbreiten laufend an, funktioniert mit horizontalem Scrolling und berücksichtigt, ob der Ribbon sichtbar ist bzw. nicht! Die Sortier- und Filter-Menüs auf den Spalten funktionieren nach wie vor identisch, aber nur wenn nach oben gescrollt wird (auf der Original-Tabelle).
Die Einbindung ist simple, am einfachsten in der MasterPage jQuery und mein Script einbinden, fertig.
Fertiges Resultat der Einbindung
Enbindung:
<script type=“text/javascript“ src=“/SiteAssets/scripts/jquery-1.7.1.min.js“></script>
<script type=“text/javascript“ src=“/SiteAssets/scripts/FixedTableHeader.js“></script>
Download: FixedTableHeader.js
2sicgeeks 
Hallo, es muss doch auch möglich sein den Code direkt in ein CEWP zu schreiben. Ich habe es folgendermaßen probiert:
$(document).ready(function () {
InitFixedTableHeader();
});
//anschließend sind hier noch die beiden Funktionen InitFixedTableHeader() und InitFixedTableHeaderWidths() eingefügt
Leider funktioniert es so nicht. Wo liegt mein Fehler?
Hallo David
InitFixedTableHeader() darf nicht direkt beim .ready Event aufgerufen werden, sondern muss im SharePoint BodyOnLoad hinzugefügt werden:
$(document).ready(function () {
_spBodyOnLoadFunctionNames.push(„InitFixedTableHeader“);
});
Gruss
Beni
Hallo Benjamin,
danke für deine Hilfe, funktioniert bei mir leider immer noch nicht. Könnte es daran liegen, dass ich SP 2007 benutze?
Gruß
David
Hallo David
Ja, mein Beispiel ist speziell für SharePoint 2010 mit dem Ribbon UI. Dieses sollte mit SharePoint 2007 (WSS 3) funktionieren:
http://kjellsj.blogspot.ch/2009/06/sharepoint-jquery-scrolling-view-with.html
Gruss
Beni
Hello, I’m trying to make this work in SharePoint 2010. For some reason it doesn’t work. I’ve put alerts in between to make sure script is being called. Alerts are fired but the headers are not fixed. Please help
I’d recommend you to use Firefox and check whether there are Errors in the Error Console. If there’s none, use Firebug or IE Developer Tools to verify InitFixedTableHeaderWidths() is called.
Hi.. Thank you for the reply. There are no errors and I can see that the FloatingHeaderTable is getting added to the page but it is not visible. The top value is not set correctly. It is getting hidden behind the blue bar (site actions).
Are you using the default master Page v4.master or another one? Could you send me a Screenshot or give me a login to your SharePoint?
Hallo, super Sache!!
Leider bekomm ich es nicht zum laufen… An welcher Stelle der v4.Master füge ich das Script denn am besten ein? Vielen Dank für die Info!
Hallo Ruediger
Die Stelle in v4.Master ist nicht wichtig. Typischerweise im head-Tag an derselben Stelle, an der schon andere JavaScripts eingebunden werden.
Zum Eingrenzen empfehle ich dir mit Internet Explorer Developer Tools oder Firebug Breakpoints zu setzen oder alerts einzubauen. So findest du rasch heraus, ob und bis wohin das JavaScript funktioniert. Allenfalls findest du auch in der Console Warnungen oder Fehlermeldungen, die dir weiterhelfen.
Hallo Benjamin,
vielen Dank für die Antwort! Das debuggen hat geholfen! Hab ein einfaches alert ( alert( ‚Testnachricht‘ ); ) an dieselbe Stelle mit eingebaut und dieses wurde aufgerufen. Dann viel mir auf das ich nen Fehler in einem der Pfade zur Style Library (dort liegen die Skripte momentan) hatte und somit das Skript garnicht aufgerufen wurde… Jetzt läuft aber alles und es funktioniert super! Nochmals vielen vielen Dank für diese tolle Lösung! Ruediger
Hallo Benjamin,
deine Lösung funktiniert prima. Kann man diese Funktionalität auch in Listen innerhalb eines Webparts einbauen?
Gruß Klaus
Hallo Klaus
Eine ähnliche Lösung sollte auch innerhalb eines Webparts (z.B. auf einer Wiki-Seite) möglich sein. Die Anforderungen sind etwas komplexer, da mehrere unterschiedliche Webparts vorhanden sein können (mit jeweils eigenen Hilfstabellen für die Spaltenüberschriften) und sich der Ribbon etwas anders verhält.
Gruss
Benjamin
Thank You Benjamin for sharing this code.
The script is absolutely working fine & freezing the column headers in SharePoint 2010 list view pages that are using default Master Page.
What I am supposed to take care, so that this script will work fine with list views pages (sites) that are using Custom Master page?
In customized sites, the script runs ( I inserted alert messages) but does not show any effect in freezing the view headers. Also does not throw any errors.
Appreciate your help.
Aravind
Hello Aravind,
You said the solution is working fine. Can you please tell me the step by step procedure for implementing this in sharepoint 2010.
Thank in advance
Vamsee,
This code works fine with v4,master page only. If you are using default master page, Upload the .js file in site assets library and just put the code in a content editior webpart (HTML Portion) in a list view page.
If yours is a custom master page, then this code will not be much useful.
Thank You.
Hello everyone,
From the example image given in this blog, I see that the column header is working with respect to the ribbon. What am I supposed to do, if I want the column header to be fixed with respect to the table and the content of it should scroll.
Can anyone give me a solution?
Thanks in advance.
Hallo,
es würde mich interessieren, ob man auch eine Möglichkeit hat das Script mit einem Inhaltseditor auf der entsprechende Seite zu platzieren.
Wir haben noch nicht viel mit dem SP-Designer gearbeitet. Müsste ich dort auf der .aspx des gewünschten Views dein Script einbinden? Wo müsste ich das platzieren?
Leider mit dem Bearbeiten der Masterpage etwas unerfahren.
Es wäre nett, wenn mir jemand eine Tipp geben könnte.
Grüße
Tiac
Hallo Tiac
Du kannst die beiden JavaScripts auch irgendwo auf der View-Seite (z.B. /Lists/Products/AllItems.aspx) in einem Inhalts-Editor-Webpart platzieren.
Beni
Can the headers show filters after scrolling down. Currently after scroll down filter options are not show?
Hi Sri,
Currently the fixed headers can’t show filters. I think there’s almost no possibility because it would require duplicating the filters menu or move it in the DOM. Unfortunately both breaks the SharePoint filter functionality.
Regards,
Benjamin
Hallo Benjamin,
mir ist noch ein kleiner Fehler aufgefallen. Und zwar: Wenn ich in meiner Liste runterscrolle und dann das Fenster maximiere, dann bleiben die Überschriften mitten in der Liste stehen. Kann man dort irgend etwas machen?
Hier noch ein Screenshot: http://www.imagebanana.com/view/a9kra6of/Ueberschriften_Liste.PNG
Viele Grüße,
Daniel
Was mir auch noch aufgefallen ist: Wenn ich eine Liste öffne, bei der normal der vertikale Scrollbalken im Browser erscheinen würde, dann hat man als User keine Möglichkeit weiter runter zu scrollen.
Hallo Daniel
Das Problem kann ich leider nicht reproduzieren. Bei jedem Scrollen und Windows Resize ($(window).resize) wird die Header-Row aktualisiert.
Ich tippe auf ein grundsätzliches Problem mit deinem Browser, dass der Resize-Event nicht funktioniert. Details: http://api.jquery.com/resize/
Gruss
Benjamin
Hallo Benjamin,
selbes Verhalten habe ich zum Teil in zwei verschiedenen Browsern.
1. Die Überschriften der Spalten beim Maximieren des Fenster bleiben nur beim IE9 bestehen. Beim Firefox hingegen funktioniert soweit alles.
2. Der vertikale Scrollbalken ist aber bei beiden ein Problem. Im IE9 wird er zu groß angezeigt und ich habe keine Möglichkeit damit zu scrollen (s. Screenshot) und beim Firefox bekomme ich gar keinen Balken angezeigt.
Hier noch der Screenshot:
Viele Grüße,
Daniel
Hi Benjamin,
versuche nun schon seit Wochen deine Lösung mit einzubauen und bekomme es einfach nicht hin.
Es kann ja nur daran liegen das ich totaler Anfänger bin, gibt es irgendwo zu deiner Lösung eine bebilderte Anleitung oder eben eine schritt für schritt Anleitung für Dummies?
Viele Grüße
Jörg
Hallo Jörg
Anleitungen zu jQuery mit SharePoint 2010 gibt es im Internet bereits mehrere, z.B. auf http://blogs.msdn.com/b/yojoshi/archive/2010/06/17/using-jquery-with-sharepoint-2010.aspx
.
Mein Beitrag ist mehr als Vorlage gedacht. Es ist möglich, dass sie je nach SharePoint Version angepasst werden muss, insbesondere braucht es für SharePoint 2013 eine General-Überarbeitung.
Gruss
Benjamin
Hallo Benjamin,
hättest Du denn eine für SP 2013 angepasste / überarbeitete Fassung, die Du hier zur Verfügung stellen könntest?.
Wäre super
Grüsse Sven
Für SharePoint 2013 habe ich momentan keine angepasste Fassung. Ich hatte einmal begonnen, die Version vom SharePoint 2010 zu übernehmen und dann abgebrochen, weil sich in der Struktur/DOM mehrere Dinge geändert hatten und sich der Aufwand nicht lohnte.
Hello there,
I did exactly whatever mentioned above like created a HTML file (with links to JS and JQuery) and gave this reference in the content editor web part of the List page.The problem is i cant see the vertical scroll bar in the browser at all to check whether the header frozen while scrolling the list.
the other thing i noticed is when i open this page in Developers tolls(F12) mode the scroll bar again came back. Interestingly the F12 mode has IE9 set as default but the actual browser is set to IE11.How can i resolve this issue? kindly help.
Thanks
abhi