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
Die HTML-Tag-ID kann eine Variable sein
<table id=" <%=var1%>">, der...
Docker-Protokolle - Zeigen Sie die Implementierung der Docker-Container-Protokolle an
Sie können die Containerprotokolle über den Befeh...
Vertieftes Verständnis des Implementierungsprinzips des Require Loader
Vorwort Wir sagen oft, dass Node keine neue Progr...
Beispiel für die Ausführung eines MySQL-Befehlszeilenskripts
Dieser Artikel veranschaulicht anhand eines Beisp...
So verwenden Sie das Datums-Plugin vue-bootstrap-datetimepicker in vue-cli 3
Nachfragehintergrund In letzter Zeit plane ich, V...
So implementieren Sie die Unschärfefunktion von DIV
Verwenden Sie Anti-Shake, um DIV verschwinden zu ...
Tutorial zum Erstellen einer visuellen Leistungsüberwachungsplattform mit JMeter+Grafana+InfluxDB in einer Docker-Umgebung
Inhaltsverzeichnis 1. Docker installieren 2. Inst...
JS-Version des Bildlupeneffekts
In diesem Artikel wird der spezifische JS-Code zu...
Detaillierte Anweisungen zur Installation von MySQL8.0.19 im CentOS7.5-Tutorial
1. Einleitung Dieser Artikel enthält keine Screen...
JS ermittelt die Position des n-ten Vorkommens einer angegebenen Zeichenfolge in einer Zeichenfolge
Erfahren Sie mehr über ähnliche Methoden zum Ermi...
Zusammenfassung gängiger Nginx-Techniken und Beispiele
1. Priorität mehrerer Server Wenn beispielsweise ...
Eine kurze Diskussion über MySQL-Ereignisplanungsaufgaben
1. Prüfen Sie, ob das Ereignis aktiviert ist Vari...
Linux Samba-Server – sehr detaillierte Installation und Konfiguration (mit Problemlösung)
Inhaltsverzeichnis Einführung in den Samba-Server...
MySQL implementiert Ranking und fragt die angegebene Benutzer-Ranking-Funktion ab (parallele Ranking-Funktion) Beispielcode
Vorwort Dieser Artikel stellt hauptsächlich die r...
Detaillierte Erklärung zur Verwendung von Teleport in Vue3
Inhaltsverzeichnis Zweck des Teleports So funktio...