js-Objekt, um einen Daten-Paging-Effekt zu erzielen
|
In diesem Artikelbeispiel wird der spezifische Code des JS-Objekts zur Erzielung eines Datenpaging-Effekts zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Um die Datenpaginierung zu implementieren, müssen Sie sich über die Gestaltung dieses Aspekts im Klaren sein: 1. Simulieren und erstellen Sie zunächst eine Backend-Datenbank wie folgt:
var person = [
{
"id": "1",
" Name":"Ju Jingyi",
"Geschlecht": "weiblich",
"Alter":"25",
"Klasse": "Klasse 8",
"habby": "tanzen",
"Punktzahl": "40",
"Adresse": "Chang'an District, Xi'an, Shaanxi"
},
{
"id": "2",
" Name: "Guan Xiaotong",
"Geschlecht": "weiblich",
"Alter":"20",
"Klasse": "Klasse 8",
"habby": "tanzen",
"Punktzahl": "40",
"Adresse": "Chang'an District, Xi'an, Shaanxi"
},
{
"id": "3",
" Name: „Zhao Liying“,
"Geschlecht": "weiblich",
"Alter":"26",
"Klasse": "Klasse 8",
"habby": "tanzen",
"Punktzahl": "40",
"Adresse": "Chang'an District, Xi'an, Shaanxi"
},
{
"id": "4",
" Name: „Xue Zhiqian“,
"Geschlecht": "männlich",
"Alter":"37",
"Klasse": "Klasse 8",
"habby": "tanzen",
"Punktzahl": "40",
"Adresse": "Chang'an District, Xi'an, Shaanxi"
}
]2. Legen Sie die Datenmenge pro Seite, die aktuelle Seitenzahl und die Gesamtseitenzahl fest Verwenden Sie eine Funktion, um die Gesamtzahl der Seiten dynamisch festzulegen. Diese wird berechnet, indem die Gesamtdatenmenge durch die Datenmenge pro Seite geteilt wird.
Alle Seiten: function () {
dies.alleseite = Math.ceil(diese.Message.length / dies.perpage);
Konsole.log(diese.Nachricht.Länge);
Konsole.log(diese.alleSeite);
},
Jetztpagenum:function(n){
var erste = (n-1) * diese.proSeite; //0
var letztes = n*diese.proSeite; //10
this.nowpagenum =this.Message.slice(erste,letzte);
},3. Erstellen Sie dynamisch DOM-Elemente und fügen Sie dem größten Block Unterelemente hinzu, um jedes Datenelement zu speichern
Erstellen Sie Neuigkeiten:Funktion() {
diese.Liste.innerHTML = "";
für (var i = 0; i < this.perpage; i++) {
var page_list = document.createElement("div");
page_list.className = "Seitenliste";
für (var Schlüssel in this.nowpagenum[i]) {
var per_child = document.createElement("div");
pro_Kind.Klassenname = "proKind";
page_list.appendChild(pro_Kind);
per_child.innerHTML = diese.nowpagenum[i][Schlüssel];
//Konsole.log(diese.jetztSeitennummer[i]);
}
diese.Liste.appendChild(Seitenliste);
}
},4. Erstellen Sie die Seitenzahlen unterhalb der Liste und führen Sie einen vorderen Einzug, einen hinteren Einzug und einen vorderen und hinteren Einzug durch Angenommen, die Gesamtzahl der Seiten beträgt: Wenn die aktuelle Seitenzahl größer als 5 Seiten ist, wird der vordere Einzug ausgeführt und die vorherige Seitenzahl wird von 2 bis zur aktuellen Seitenzahl minus 1 eingerückt.
Page_ma:Funktion(aktuell,gesamt){
var str="";
für(var i=1;i <=totle;i++){
wenn (i ==2 und aktuell-3>i) { //ǰ���� aktuell>5
i=aktuell-1;
str+="<li>...</li>";
}
sonst wenn(i==current+4 && current+4<totle){
i=Gesamt-1;
str+="<li>...</li>"; //������ aktuell<16
}
anders{
wenn(aktuell==i){
str+="<li class='minilist' style='background: pink'>"+i+"</li>";
}
anders{
str+="<li class='minilist'>"+i+"</li>";
}
}
}
dies .pageshu.innerHTML= str;
},5. Wenn Sie auf eine Seite klicken, werden die Daten der aktuellen Seite angezeigt und entsprechend eingerückt
Seitenklick:Funktion(){
var mini_list = document.getElementsByClassName ("Miniliste");
für(var k=0;k <mini_list.length;k++){
mini_list[k].onclick=Funktion(){
Fenye.nowpage = parseInt (this.innerHTML);
// console.log(dieses.innerHTML); //mini_list[k] �������ı�
Fenye.Page_ma(Fenye.jetztseite,Fenye.alleseite);
Fenye.Pageclick();
Fenye.Neuigkeiten erstellen();
Fenye.Nowpagenum (Fenye.nowpage);
}6. Wenn Sie auf die vorherige oder nächste Seite klicken oder die Seitenzahl festlegen, zu der gesprungen werden soll, werden die Daten der aktuellen Seite angezeigt und entsprechend eingerückt.
Klickereignis:Funktion(){
Fenye.back.onclick =Funktion(){
Fenye.nowpage--;
if(Fenye.nowpage<2){
Fenye.nowpage=1;
}
Fenye.Page_ma(Fenye.jetztseite,Fenye.alleseite);
Fenye.Pageclick();
Fenye.Neuigkeiten erstellen();
Fenye.Nowpagenum (Fenye.nowpage);
};
Fenye.go.onclick = Funktion(){
if(Fenye.jetztseite>=Fenye.alleseite){
Fenye.nowpage=Fenye.allpage;
}
Fenye.nowpage++;
Fenye.Page_ma(Fenye.jetztseite,Fenye.alleseite);
Fenye.Pageclick();
Fenye.Neuigkeiten erstellen();
Fenye.Nowpagenum (Fenye.nowpage);
};
Fenye.tiao.onclick = Funktion(){
var put = document.getElementById ("in_put");
Fenye.nowpage = parseInt (put.value);
wenn(put.value>=Fenye.allpage){
Fenye.nowpage = parseInt (put.value);
}
Fenye.Page_ma(Fenye.jetztseite,Fenye.alleseite);
Fenye.Pageclick();
Fenye.Erstellen Sie Nachrichten();
Fenye.Nowpagenum (Fenye.nowpage);
}
}HTML- und CSS-Teile
<!DOCTYPE html>
<html>
<head lang="de">
<meta charset="UTF-8">
<Titel></Titel>
<script src="js/message1.js" type="text/javascript"></script>
<script src="js/pagenews.js" type="text/javascript"></script>
<Stil>
*{
Rand: 0;
Polsterung: 0;
}
li{
Listenstil: keiner;
}
.Block{
Position: relativ;
Breite: 1200px;
Höhe: 600px;
Rand: automatisch;
Rand: 1px, durchgehend dunkelblau;
}
.totle {
Breite: 100 %;
Höhe: 40px;
Anzeige: Flex;
Flex-Richtung: Reihe;
biegen: 1;
Hintergrund: #b0ffd8;
Textausrichtung: zentriert;
Farbe: #5c5a5c;
Schriftgröße: 18px;
Zeilenhöhe: 40px;
}
.tot_1 {
biegen: 1;
}
.tot_2{
Flexibilität: 2,5;
}
.Liste{
Breite: 1200px;
Höhe: automatisch;
}
.Seitenliste{
Breite: 100 %;
Höhe: 35px;
Rahmen unten: 1px massives Silber;
Anzeige: Flex;
Flex-Richtung: Reihe;
Textausrichtung: zentriert;
}
.proKind:n-tes-Kind(1) {
biegen: 1;
}
.proKind:n-tes-Kind(2) {
biegen: 1;
}
.proKind:n-tes-Kind(3) {
biegen: 1;
}
.proKind:n-tes-Kind(4) {
biegen: 1;
}
.proKind:n-tes-Kind(5) {
biegen: 1;
}
.proKind:n-tes-Kind(6) {
biegen: 1;
}
.proKind:n-tes-Kind(7) {
biegen: 1;
}
.proKind:n-tes-Kind(8) {
Flexibilität: 2,5;
Hintergrund: rosa;
}
.Fußzeile{
Position: absolut;
unten: 5px;
links: 10px;
}
#pageshu>li{
Breite: 35px;
Höhe: 35px;
Zeilenhöhe: 35px;
Anzeige: Inline-Block;
Textausrichtung: zentriert;
Rand: 1px, durchgehend grau;
}
#zurück, #gehen{
Breite: 60px;
Höhe: 35px;
Zeilenhöhe: 35px;
Rand: 1px, durchgehend schwarz;
Anzeige: Inline-Block;
Textausrichtung: zentriert;
}
#foot_li>li:nth-child(2), #foot_li>li:nth-child(4), #foot_li>li:nth-child(5),#foot_li>li:nth-child(6){
Anzeige: Inline-Block;
}
#foot_li>li:nth-child(4)>Eingabe{
Breite: 30px;
Höhe: 20px;
Gliederung: keine;
}
#foot_li>li:nth-child(5)>Schaltfläche{
Hintergrund: #000bff;
Farbe: #fff;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Block">
<div Klasse="totle">
<div class="tot_1">Studierendenausweis</div>
<div class="tot_1">Name</div>
<div class="tot_1">Geschlecht</div>
<div class="tot_1">Alter</div>
<div class="tot_1">Klasse</div>
<div class="tot_1">Hobbys</div>
<div class="tot_1">Credits</div>
<div class="tot_2">Privatadresse</div>
</div>
<div Klasse="Liste">
</div>
<div Klasse="Fußzeile">
<ul id="Fuß_li">
<li id="back">Vorherige Seite</li>
<li>
<ul id="Seitenhu">
</ul>
</li>
<li id="go">Nächste Seite</li>
<li>Springe zu <input id="in_put" type="text"/> </li>
<li><button id="tiao">Springen</button></li>
<li>Seiten insgesamt:<span id="tot"></span></li>
</ul>
</div>
</div>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: So ändern Sie die Quellenliste von Ubuntu 18.04 zum Alibaba- oder Tsinghua-Spiegel
>>: MySQL implementiert eine Beispielmethode zum Anmelden ohne Kennwort
Artikel empfehlen
uniapp Beispielcode zur Implementierung der globalen Freigabe von WeChat-Miniprogrammen
Inhaltsverzeichnis Erstellen einer global freigeg...
Erfahrung mit parallelen React-Funktionen (gleichzeitiger Front-End-Modus)
React ist eine Open-Source-JavaScript-Bibliothek,...
Detaillierte Erklärung der Lösung für den Absturz von Tomcat beim Doppelklicken auf startup.bat
Als Programmierer, der gerade Tomcat gelernt hat,...
Verwendung von „align-content“ im Zeilenumbruchbereich des Flex-Layouts
1. Das in diesem Artikel implementierte Effektdia...
Webseite WB.ExecWB - Beschreibung des Aufrufs der Druckmethode und Einführung in die Parameter
Webseite WB.ExecWB-Steuerungsdruckmethode Code ko...
jQuery realisiert dynamische Partikeleffekte
In diesem Artikel wird der spezifische Code von j...
So erlauben Sie allen Hosts den Zugriff auf MySQL
1. Ändern Sie den Host-Feldwert eines Datensatzes...
Detaillierte Erklärung des MySQL-Ausführungsplans
Die EXPLAIN-Anweisung liefert Informationen darüb...
MySQL-Rekursionsproblem
MySQL selbst unterstützt keine rekursive Syntax, ...
Beheben Sie das Problem, dass der Docker-Container das externe Netzwerk nicht anpingen kann
Als ich heute eine Redis-Umgebung in Docker erste...
Detaillierte Erläuterung der Installation des Nginx-Servers und der Lastausgleichskonfiguration auf einem Linux-System
nginx (Engine x) ist ein leistungsstarker HTTP- u...
Detaillierte Erläuterung der Axios-Kapselung und des API-Schnittstellenmanagements im React-Projekt
Inhaltsverzeichnis Vorwort Installieren Einführun...
js implementiert Tabellen-Drag-Optionen
In diesem Artikelbeispiel wird der spezifische JS...
Die Beziehung zwischen JS-Konstruktor und Instanziierung sowie Prototypeinführung
Inhaltsverzeichnis 1. Konstruktor und Instanziier...
Die Verwendung von FrameLayout in sechs Layouts
Vorwort In der letzten Ausgabe haben wir Ihnen Li...