Blättern (Pagination)
Einfaches Listenblättern
sieht so aus:
Die Leiste oben und unten kann in Bausteine ausgegliedert werden. Dann kann Sie für jede Liste im Web genutzt werden. Voraussetzung: die Liste heißt dann immer "Liste", also <bx:containerfilter.Liste pool="...">
HTML in der Seite
<bx:include modul="blaetternOben"/>
<bx:containerfilter.Liste pool="Witze" orderby="Titel" max="5">
<div class="listitem"<bx:recorddata.if last> style="margin-bottom:0;"</bx:recorddata.if>>
<a href="detail.htm?rezeptid=<bx:recorddata.id/>"><bx:recordfield.Titel/></a>
</div>
</bx:containerfilter.Liste>
<bx:include modul="blaetternUnten"/>
ausgelagertes Include "blaetternOben"
<div class="blaetternoben">
<bx:recorddata.nav object="Liste">
<bx:recorddata.startindex/> - <bx:recorddata.endindex/> von <bx:recorddata.total/> Einträgen
</bx:recorddata.nav>
</div>
ausgelagertes Include "blaetternUnten"
<div class="blaetternunten">
<bx:recorddata.nav object="Liste">
<bx:if><bx:recorddata.previouslist><< zurück</bx:recorddata.previouslist><bx:if.else><span style="color:#8f8f8f;"><< zurück</span></bx:if.else></bx:if>
| <strong>Seite:</strong>
<bx:recorddata.navlink move="-5"/>
<bx:recorddata.navlist max="5" boundary=" · "/>
<bx:recorddata.navlink move="5"/>
|
<bx:if><bx:recorddata.nextlist>weiter >></bx:recorddata.nextlist><bx:if.else><span style="color:#8f8f8f;">weiter >></span></bx:if.else></bx:if>
</bx:recorddata.nav>
</div>
wenn nichts zum Blättern da ist, nicht anzeigen
<bx:tabledata.nav object="Aktuelles">
<bx:iF type="any">
<div class="blaetternunten">
<bx:iF.ignore>
<bx:if><bx:tabledata.previouslist><< zurück</bx:tabledata.previouslist><bx:if.else><span style="color:#8f8f8f;"><< zurück</span></bx:if.else></bx:if>
</bx:iF.ignore>
| <strong>Seite:</strong>
<bx:tabledata.navlink move="-5"/>
<bx:tabledata.navlist max="5" boundary=" · "/>
<bx:tabledata.navlink move="5"/>
|
<bx:iF.ignore>
<bx:if><bx:tabledata.nextlist>weiter >></bx:tabledata.nextlist><bx:if.else><span style="color:#8f8f8f;">weiter >></span></bx:if.else></bx:if>
</bx:iF.ignore>
</div>
</bx:iF>
</bx:tabledata.nav>
zugehöriges CSS
.blaetternunten,.blaetternoben{
background-color:#999999;
text-align:center;
padding:5px;
color:#ffffff;
}
Etwas ausführlicheres Stylen
sieht so aus:
Code
<bx:recorddata.nav object="Liste">
<div id="blaetterbox">
<div id="blaetterelements">
<span id="blaettern-left">
<bx:if><bx:recorddata.previouslist>« zurück</bx:recorddata.previouslist><bx:if.else><span style="color:#B2B2B2;">« zurück</span></bx:if.else></bx:if>
</span>
<span id="blaettern-middle">
<bx:recorddata.navlist max="5" boundary="">
<bx:recorddata.navlistcurrent><span><bx:recorddata.navlistpage/></span></bx:recorddata.navlistcurrent>
<bx:recorddata.navlistcurrent not><a href="?index=<bx:recorddata.navlistindex/>"><bx:recorddata.navlistpage/></a></bx:recorddata.navlistcurrent>
</bx:recorddata.navlist>
</span>
<span id="blaettern-right">
<bx:if><bx:recorddata.nextlist>weiter »</bx:recorddata.nextlist><bx:if.else><span style="color:#B2B2B2;">weiter »</span></bx:if.else></bx:if>
</span>
</div>
</div>
</bx:recorddata.nav>
zugehöriges CSS
#blaetterbox {
width:100%;
height:28px;
background-color:#b2b2b2;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#blaetterbox #blaetterelements {
width:365px; margin:auto;
font-size:10pt;
font-weight:bold;
padding-top:6px;
text-align:center;
}
#blaetterbox #blaetterelements #blaettern-middle{#
padding:0 20px;
}
#blaetterbox #blaetterelements #blaettern-left a, #blaetterbox #blaetterelements #blaettern-right a{
text-decoration:none;
color:#605639;
filter: dropshadow(color=#949494, offx=-1, offy=-1);
}
#blaetterbox #blaetterelements #blaettern-left span, #blaetterbox #blaetterelements #blaettern-right span{
text-decoration:none;
color:#ffffff;
text-shadow: -1px -1px 0px #949494;
filter: dropshadow(color=#949494, offx=-1, offy=-1);
}
#blaetterbox #blaetterelements #blaettern-middle span{
text-decoration:none;
letter-spacing:5px;
color:#ffffff;
background-color:#968659;
padding:6px 1px 5px 7px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#blaetterbox #blaetterelements #blaettern-middle a{
text-decoration:none;
letter-spacing:5px;
color:#605639;
padding:6px 1px 7px 7px;
}
Springe-zu-Funktion
Ergänzung mit:
Code
<br><br>springe zu:
<select name="change" size="1" style="width:50px;" onchange="">
<bx:recorddata.navlist object="MeineSuchergebnisliste" max="0">
<option value="<bx:recorddata.navlistpath encoding="html" />"><bx:recorddata.navlistpage/></option>
</bx:recorddata.navlist>
</select>
sieht dann so aus:
Dieser Quelltext-Schnipsel kann beliebig außerhalb des recorddata.nav-Blocks in das HTML-Template eingebunden werden (auf Wunsch auch innerhalb, kein Ding) und baut eine SELECT-Box in den HTML-Quellcode ein inkl. aller verfügbaren Seitenergebnisse und dem entsprechenden Blätter-Parameter.
Hinweis:
Man muss abschließend nur noch die SELECT-Box via JavaScript animieren etwas zu tun, wenn eine Auswahl getroffen wurde (Parameter versteckt setzen+Form abschicken oder URL-Aufruf …)
Zusätzlich kann eine kleine Abfrage um die Select-Box gebaut werden, dass diese bspw. nur angezeigt wird, wenn es mehr als 5 Seiten zu blättern gibt. Somit bleibt die Webseite schön clean und wenn es wirklich mehrere Suchseiten gibt die auch nicht mehr über die bisherige Darstellung sinnvoll angezeigt werden, dann ist die Springe-zu-Funktion hilfreich. Bei 2 Seiten ist diese neue Erweiterung nicht so hilfreich wie bei 15 Suchergebnisseiten.
Bootstrap4-Pagination
<bx:recorddata.empty object="{listenname}" not>
<bx:recorddata.nav object="Telefonate" indexparam="{parametername_index}">
<nav aria-label="Page navigation" class="mt-4">
<ul class="pagination">
<li class="page-item"><a class="page-link" href="./?parametername_index=0<bx:if>&searchvalue=<bx:pagedata.request name="searchvalue"/></bx:if>" title="zur ersten Seite"><i class="fa fa-fast-backward" aria-hidden="true"></i> zur Seite 1</a></li>
<bx:recorddata.previouslist type="if"><li class="page-item"><a class="page-link" href="./?parametername_index=<bx:Recorddata.previouslist type="index"/><bx:if>&searchvalue=<bx:pagedata.request name="searchvalue"/></bx:if>" title="eine Seite zurück"><i class="fa fa-backward" aria-hidden="true"></i></a></li></bx:recorddata.previouslist>
<bx:recorddata.navlist max="5">
<bx:recorddata.navlistcurrent not>
<li class="page-item"><a class="page-link" href="./?parametername_index=<bx:recorddata.navlistindex/><bx:if>&searchvalue=<bx:pagedata.request name="searchvalue"/></bx:if>" title="Zur Seite <bx:recorddata.navlistpage/>"><bx:recorddata.navlistpage/></a></li>
</bx:recorddata.navlistcurrent>
<bx:recorddata.navlistcurrent>
<li class="page-item active"><a class="page-link" href="#"><bx:recorddata.navlistpage/> <span class="sr-only">(current)</span></a></li>
</bx:recorddata.navlistcurrent>
</bx:recorddata.navlist>
<bx:recorddata.nextlist type="if"><li class="page-item"><a class="page-link" href="./?parametername_index=<bx:Recorddata.nextlist type="index"/><bx:if>&searchvalue=<bx:pagedata.request name="searchvalue"/></bx:if>" title="eine Seite vor"><i class="fa fa-forward" aria-hidden="true"></i></a></li></bx:recorddata.nextlist>
<li class="page-item"><a class="page-link" href="./?parametername_index=<bx:recorddata.lastlist type="index"/><bx:if>&searchvalue=<bx:pagedata.request name="searchvalue"/></bx:if>" title="zur letzten Seite">zur Seite <bx:recorddata.totalpages/> <i class="fa fa-fast-forward" aria-hidden="true"></i></a></li>
</ul>
</nav>
</bx:recorddata.nav>
</bx:recorddata.empty>