Lassen Sie mich Ihnen zuerst die Renderings zeigen. Wenn Sie der Meinung sind, dass der Effekt gut ist, lesen Sie bitte den Implementierungscode:
Da ich zum ersten Mal Paging in JS schreibe, sollte das Schreiben nicht perfekt sein. Einige öffentliche werden nicht extrahiert, aber sie sind immer noch in Ordnung zu verwenden. Dieser Code kann als öffentlicher Paging behandelt werden. Ich habe diesen Code verwendet, um zwei etwas andere Paging zu schreiben! Die gemeinsamen Codextrakte sind ähnlich, hauptsächlich weil der Ajax -Hintergrund und die zurückgegebenen Werte unterschiedlich sind. Solange die Gesamtseitennummer erhalten wird, und auf die Startseite/die nächste Seite klicken, um den Wert korrekt zu übergeben, wird im Grunde kein Problem mit der Pagination auftreten.
Es gibt in der Tat viele Paging-Plug-Ins und Open-Source-Codes im Internet. Ein einzelnes Buch ist ein Backend Development APE, und das Frontend CSS und andere Stile sind immer noch unkontrollierbar, also habe ich angefangen, es selbst zu schreiben. Tatsächlich ist das Prinzip der Paging sehr einfach. Es soll AJAX verwenden, um Werte (aktuelle Seitenzahl) an den Hintergrund zu übergeben und die Grenze zu verwenden, um sie im Hintergrund zu paginieren.
Laden Sie ohne weiteres den Code hoch!
Hinweis: Dieses Projekt wird während des gesamten Prozesses mit JS geschrieben. Die Daten an der Rezeption werden über Ajax erhalten und dann dynamisch zusammengebaut und auf die Seite geladen.
1. Fügen Sie zunächst die Codes der vorherigen Seite, die nächste Seite usw. an (die Werte im Inneren sind alle Pseudowerte, und das Folgende wird in JS neu zugewiesen!)
<ul id = "page"> <li id = "shouye"> <a href = 'JavaScript: Indexpage (1);'> Home </a> </li> <li id = "shangyiye"> <a href = 'javascript: Indexpage (-1); href = "JavaScript: void (0);" > 1 </a> </li> <li> <a id = "zwei" href = "javaScript: void (0);" > 2 </a> </li> <li> <a id = "drei" href = "javaScript: void (0);" > 2 </a> </li> <li> <a id = "drei" href = "javaScript: void (0);" > 3 </a> </li> <li> <a id = "fünf" href = "javaScript: void (0);" > ... </a> </li> <li> <a id = "vor" href = "javaScript: void (0);" > 13855 </a> </li> <li class = 'p-next'> <a href = 'JavaScript: IndexPage (-3);' Onclick = "Jumptopage ('2', '/Waren/ajaxQueryGoodSlist.do.html', '', 'GoodsListContainer', '13855', ListPageCallback); href = 'JavaScript: void (0);' onclick = "IndexPage (0);"> Letzte Seite </a> </li> <li> <span id = "span_number"> Gesamt 13.855 Seiten zum <input type = "text" id = "input_number"/> Seite <input name = "value =" identifizieren "type =" taste ". Onclick = "Jumptopage (jQuery ('#input_number'). val (), '/goods/ajaxQueryGoodSlist.do.html', '', 'GoodsListContainer', '13855', ListPageCallback);"/> </li> </ul>2. Setzen Sie zunächst zwei versteckte Felder auf die Seite, eine ist die aktuelle Seitennummer und die andere ist die Gesamtseitennummer. Die Gesamtseitennummer ist die Seite geladen und der Wert wird nach Abfragetation vom Hintergrund direkt angehängt. Wenn die aktuelle Seitennummer kein Betrieb vorliegt, müssen Sie den Wert der aktuellen Seitennummer zuweisen.
<input id = "jiazai" type = "Hidden"> </input> <!-aktuelle Seitenzahl-> <Eingabe-ID = "TotalPage" Typ = "Hidden"> </input> <!-Gesamtseitennummer->
3. Schreiben Sie eine Funktion, die auf der Seite geladen wurde, und weisen Sie der Gesamtseite und der aktuellen Seitennummer Werte zu.
$ (function () {$ ('#Jiazai').4. Extrahierte AJAX -Methode. Diese Seite wird diese Methode mehrmals verwenden, und alles wird gesammelt, da die Daten der Seite über AJAX aus dem Hintergrund erhalten werden und der Hintergrund eine Listensammlung zurückgibt.
// Die Methode zum Extrahieren von AJAX -Funktion Ajaxfunction (Page, Arg, ChipsSort, Fontval) {$. Ajax ({Typ: 'Post', url: '/admin/receptionChips/showlist', // Die angeforderte URL -Adresse Daten: {Seite: Seite, Sortierung: arg, Chipsort: Chipsort, fontval: fontval}, DataType: 'JSON', ContentType: 'Application/X-Www-Form-Form-Urlencoded; CommonFunction (Daten);}});}3.. Es gibt nicht viele Codes zu sehen, die letzte
// Die Methode zum Extrahieren von String -Schreibfunktionen Commonfunction (Daten) {$ ('#projectlist'). Find ("li"). REMET (); für (var i = 0; i <data.length; i ++) {/*****************************************. Kern der Pagination if (Data.Length> 0) {// Seitenzahl var pading = data [0] .padingnum; // Gesamtseitennummer $ ('#TotalPage'). ID = 'CurrentPageno'> "+Seite+" </b>/"+pading+" "); $ ('#span_number'). Onclick = 'IndexPage (-2)'/Waren/ajaxQueryGoodSlist.do.html ',' ',' GoodsListContainer ',' "+Pading+" ', ListPageCallback);' class = 'page-btn'/> ")} else {$ ('#countPage'). href = "javaScript: void (0);" var nowpage = $ ('#jiazai'). val (); // aktuelle Seite // Eines drei fünf Vorformen <br> // Der folgende Code sieht schwieriger aus, aber es ist nicht schwer zu verstehen, dass es alles gleiche Code ist, aber es wird nur einige Beurteilungen hinzugefügt, wenn (jetzt nun (nune) <5 5 <5 5 <5 5) ist, aber jetzt (nun (nun) <5 <5 <5 <5) ist jedoch <5 <5, aber es wird (nun (nun) hinzugefügt. ) {$ ('#One'). Text (1); $ ('#One'). attr ('href', 'JavaScript: pagenum ("'+1+'");'); (3); $ ('#drei'). Attr ('href', 'JavaScript: pagenum ("'+(3)+'");'); $ ('#fünf'). Text (4); $ ('#fünf') ttr ('href', 'JavaScript: pagenum ("'+(4)+'");'); $ ('#vor'). Text (5); $ ('#vor'). Text (5); e '). attr (' href ',' JavaScript: pagenum ("'+(5)+'"); '); $ ('#fünf '). Parent (). owpage) -2); +(Number (nowpage) -1)+'");'); $ ('#drei'). Text (nowpage); überschreitet die Gesamtzahl der Seiten if (Nummer (nowpage) +1> pading) {$ ('#fünf'). parent (). hide (); OWPage) +1); lse {$ ('#vor'). parent (). show (); $ ('#vor'). text (nummer (nowpage) +2); und hide if (pading == 0) {$ ('#Eins'). Parent (). hide (); $ ('#zwei'). parent (). hide (); $ ('#drei'). parent (). hide (); if (pading == 1) {$ ('#shouye'). hide (); $ ('#weiye'). hide (); ) .hide (); $ ('#drei'). parent (). hide (); $ ('#fünf'). parent (). hide (); if (pading == 2) {$ ('#Eins'). parent (). show (); $ ('#zwei'). parent (). show (); $ ('#drei'). parent () if (pading == 3) {$ ('#Eins'). Parent (). show (); $ ('#zwei'). parent (). show (); $ ('#drei'). parent (). show (); $ ('#fünf'). parent () if (pading == 4) {$ ('#One'). parent (). show (); $ ('#zwei'). parent (). show (); $ ('#drei'). Elternteil (). ) .Parent (). show (); $ ('#zwei'). parent (). show (); $ ('#drei'). parent (). show (); $ ('#fünf'). parent (). show (); a '). Jeder (function () {$ (this) .Parent (). removeclass ("current"); if ($ (this) .Text () == nowpage) {$ (this) .Parent (). 500); // Schließlich fügen Sie 1 $ ('#Jiazai'). Val (Nummer (Bianlaing)+Nummer (1)) hinzu; }Okay, die Seite ist hier abgeschlossen. Wenn Sie es verwenden müssen, kann es eine Weile dauern, um meinen Code zu verstehen. Tatsächlich ist der Code nicht schwierig. Ich habe es zwei Stunden lang verwendet, um es zu schreiben. Lesen Sie es einfach von einer Zeile von eins und fügen Sie selbst Kommentare hinzu. Holen Sie sich dieses Stück über und es wird auf jeden Fall innerhalb einer halben Stunde geschehen!