JS realisiert den Front-End-Paging-Effekt

In diesem Artikelbeispiel wird der spezifische JS-Code zur Erzielung des Front-End-Paging-Effekts als Referenz geteilt. Der spezifische Inhalt ist wie folgt

1. HTML-Teil

<!doctype html>
<html>
<Kopf>
 <meta charset='utf-8'>
    <script src="js/jquery.js"></script>
 <style type="text/css">
  ein {Textdekoration: keine;}
  Tabelle {border-collapse:collapse;Breite: 100%;Schriftgröße: 14px;}
  th{Hintergrundfarbe: #ddd;}
  Tabelle, td, th {border:1px solid #e7e8ec;}
  th,tr{Höhe: 40px;}
  td {text-align: center;}
  tr:hover{Hintergrundfarbe: #f9f4f3;}
  .barcon {Breite: 1000px;Rand: 0 auto;Textausrichtung: Mitte;}
  .barcon2 {float: rechts;}
  .barcon2 ul {Rand: 20px 0;Padding-left: 0;Listenstil: keine;Textausrichtung: Mitte;}
  .barcon2 li {display: inline;}
  .barcon2 a {Schriftgröße: 16px;Schriftstärke: normal;Anzeige: Inline-Block;Padding: 5px;Padding-Top: 0;Farbe: schwarz;Rahmen: 1px durchgezogen #ddd;Hintergrundfarbe: #fff;}
  .barcon2 a:hover{Hintergrundfarbe: #eee;}
  .ban {Deckkraft: .4;}
 </Stil>
</Kopf>
<Text>
<table width="950" cellpadding="0" cellspacing="0" class="table2" align="center">
 <Kopf>
 <tr align="center">
  <th width="150" height="33" class="td2">Seriennummer</th>
  <th width="300" class="td2">Benutzername</th>
  <th width="250" class="td2">Berechtigungen</th>
  <th width="250" class="td2">Betrieb</th>
 </tr>
 </thead>
 <tbody id="meineTabelle">
 <tr align="center">
  <td Klasse="td2" Höhe="33" Breite="150">1</td>
  <td Klasse="td2" >Administrator</td>
  <td class="td2" >Administrator</td>
  <td class="td2" ><a href="###" >Ändern</a></td>
 </tr>
 </tbody>
</Tabelle>
<div id="barcon" Klasse="barcon" >
 <div id="barcon2" class="barcon2">
  <ul>
   <li><a href="###" id="prePage">Vorherige Seite</a></li>
   <li id="barcon1"></li>
   <li><a href="###" id="nextPage">Nächste Seite</a></li>
   <li><input Typ="Text" id="num" Größe="2" oninput="Wert=Wert.replace(/[^\d]/g,'')"></li>
   <li><a href="###" id="jumpPage" onclick="jumpPage()">Springen</a></li>
  </ul>
 </div>
</div>
</body>
</html>

2. JS-Logik

<Skript>
     // Datenfunktion initialisieren dynamicAddUser(num){
        für (var i=1;i<=num;i++)
        {
            var trNode = document.createElement("tr");
            $(trNode).attr("ausrichten","zentrieren");
            //Seriennummer var tdNodeNum = document.createElement("td");
            $(tdNodeNum).html(i+1);
            tdNodeNum.style.width = "150px";
            tdNodeNum.style.height = "33px";
            tdNodeNum.Klassenname = "td2";
            //Benutzername var tdNodeName = document.createElement("td");
            $(tdNodeName).html("lzj"+i);
            tdNodeName.style.width = "300px";
            tdNodeName.className = "td2";
            //Berechtigung var tdNodePri=document.createElement("td");
            tdNodePri.style.width = "250px";
            tdNodePri.className = "td2";
            var priText = document.createElement("span");
            $(priText).css({"display":"inline-block","text-align":"center"});
            $(priText).text("Normaler Benutzer");
            tdNodePri.appendChild(priText);
            //Operation var tdNodeOper = document.createElement("td");
            tdNodeOper.style.width = "170px";
            tdNodeOper.className = "td2";
            var editA = document.createElement("a");
            $(editA).attr("href", "###").text("Bearbeiten");
            $(editA).css({ Anzeige: "Inline-Block" });
            tdNodeOper.appendChild(editA);
 
            trNode.appendChild(tdNodeNum);
            trNode.appendChild(tdNodeName);
            trNode.appendChild(tdNodePri);
            trNode.appendChild(tdNodeOper);
            $("#meineTabelle")[0].appendChild(trNode);
        }
    }
    $(Funktion(){
        dynamischerBenutzerHinzufügen(80);
        geheSeite(1,10);
    })
 
    /**
     * Paging-Funktion * pno – Seitenzahl * psize – Anzahl der pro Seite angezeigten Datensätze * Der Paging-Teil beginnt mit der tatsächlichen Datenzeile, daher muss eine Konstante addiert oder subtrahiert werden, um die tatsächliche Anzahl der Datensätze zu bestimmen * Beim reinen js-Paging werden tatsächlich alle Datenzeilen geladen und die Paging-Funktion wird durch die Anzeige von Attributen vervollständigt**/
    var pageSize=10;//Anzahl der pro Seite angezeigten Zeilen var currentPage_=1;//Globale Variable der aktuellen Seite, die verwendet wird, um zu bestimmen, ob sie sich beim Springen auf derselben Seite befindet. Wenn ja, nicht springen, andernfalls springen.
    var totalPage; //Gesamtzahl der Seiten function goPage(pno,psize){
        var itable = document.getElementById("meineTabelle");
        var num = itable.rows.length; //Anzahl aller Zeilen in der Tabelle (Anzahl aller Datensätze)
 
        pageSize = psize; //Anzahl der Zeilen pro Seite //Gesamtzahl der Seiten if (num/pageSize > parseInt(num/pageSize)) {
            Gesamtseite = parseInt (Anzahl/Seitengröße) +1;
        }anders{
            Gesamtseite = parseInt (Anzahl/Seitengröße);
        }
        var currentPage = pno; //Aktuelle Seitennummer currentPage_=currentPage;
        var startRow = (aktuelleSeite - 1) * Seitengröße+1;
        var endRow = aktuelleSeite * Seitengröße;
        endRow = (endRow > Zahl)? Zahl : endRow;
 
        $("#myTable tr").hide();
        für(var i=startRow-1;i<endRow;i++) {
            $("#myTable tr").eq(i).show();
        }
 
        var tempStr = aktuelleSeite+"/"+gesamtSeite;
        document.getElementById("barcon1").innerHTML = tempStr;
 
        wenn(aktuelleSeite>1){
            $("#ersteSeite").on("click",function(){
                geheSeite(1,psize);
            }).removeClass("Verbot");
            $("#prePage").on("klicken",function(){
                geheSeite(aktuelleSeite-1,psize);
            }).removeClass("Verbot");
        }anders{
            $("#firstPage").off("Klick").addClass("Sperre");
            $("#prePage").off("klicken").addClass("ban");
        }
 
        if (aktuelleSeite < Gesamtseite) {
            $("#nextPage").on("klicken",function(){
                geheSeite(aktuelleSeite+1,psize);
            }).removeClass("Verbot")
            $("#letzteSeite").on("Klick",function(){
                geheSeite(Gesamtseite,psize);
            }).removeClass("Verbot")
        }anders{
            $("#nextPage").off("Klick").addClass("Sperre");
            $("#lastPage").off("klicken").addClass("ban");
        }
    }
 
    Funktion Sprungseite() {
        var num = parseInt($("#num").val());
        wenn(num != aktuelleSeite_ && !isNaN(num) && num <= totalPage && num > 0) {
            goPage(Anzahl,Seitengröße);
        }
    }
</Skript>

Der Effekt ist wie unten dargestellt:

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:

Natives JS zur Implementierung der Paging-Klicksteuerung
js, um einen einfachen Front-End-Paging-Effekt zu erzielen
Paging durch reines Javascript erreichen (zwei Methoden)
Ein sehr guter JS-Paging-Effektcode, den es zu studieren lohnt
Verwenden von JS zum Erstellen eines Paging-Beispiels für HTML-Tabellen (JS zum Implementieren des Paging)
Reiner JS-Paging-Code (einfach und praktisch)
Implementierungscode für die JSP-Paginierungsanzeige
js-Paging zum Anzeigen von Div-Inhalten
Einfaches Paging-Beispiel, implementiert durch JS
Natives JS zum Erzielen eines coolen Paging-Effekts

<<: Tutorial zur Installation des neuesten MySQL 8.0.18 mithilfe eines komprimierten Pakets unter Win10 64-Bit (mit Bildern und Text)

>>: Detailliertes Tutorial zur Installation des PHP-FPM-Dienstes/der PHP-FPM-Erweiterung/-Konfiguration in Docker