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
innerHTML-Anwendung
Blanks Blog: http://www.planabc.net/ Die Verwendu...
MySQL-Unterabfrage und Details zur Verknüpfungstabelle
Inhaltsverzeichnis 1. Was ist eine Unterabfrage? ...
MySQL 8.0.20 Installations- und Konfigurations-Tutorial unter Win10
Super ausführliches Tutorial zur Installation und...
Ubuntu Docker-Installation in VMware (Containererstellung)
1. Mindmap 2. So bauen Sie einen Container 2.1 Vo...
Docker-Speicherüberwachung und Stresstestmethoden
Der ausgeführte Docker-Container zeigt, dass der ...
Reines CSS-Problem mit benutzerdefinierten mehrzeiligen Auslassungspunkten (vom Prinzip bis zur Implementierung)
Wie wird ein Textüberlauf angezeigt? Was sind Ihr...
js canvas realisiert Bilder mit abgerundeten Ecken
In diesem Artikel wird der spezifische Code von J...
So installieren Sie Windows Server 2008 R2 auf einem Dell R720-Server
Hinweis: Alle Bilder in diesem Artikel stammen au...
HTML-Formular und die Verwendung interner Formular-Tags
Code kopieren Der Code lautet wie folgt: <html...
Vue Element Front-End-Anwendungsentwicklung, dynamische Menü- und Routing-Assoziationsverarbeitung
Inhaltsverzeichnis Überblick 1. Menü- und Routing...
So installieren Sie OpenJDK in Docker und führen das JAR-Paket aus
Bild herunterladen Docker-Pull OpenJDK Erstellen ...
Drei Möglichkeiten zur Realisierung der horizontalen Zentrierung von Elementen und zum Verständnis der Konzepte von festem Layout und fließendem Layout
Die Eigenschaft, Text in CSS zu zentrieren, lässt ...
Verstehen Sie die Grundlagen von Navicat für MySQL in einem Artikel
Inhaltsverzeichnis 1. Datenbankbetrieb 2. Datenty...
Ubuntu-Terminal, mehrere Fenster, geteilter Bildschirm, Terminator
1. Installation Das größte Feature von Terminator...
Dockers Mechanismus zur Integritätserkennung
Für Container ist die einfachste Integritätsprüfu...