Heim Web-Frontend js-Tutorial js-Paging-Tool Beispiel_Javascript-Kenntnisse

js-Paging-Tool Beispiel_Javascript-Kenntnisse

May 16, 2016 pm 04:17 PM
js 分页 工具

Die Beispiele in diesem Artikel beschreiben die Verwendung des js-Paging-Tools. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

js-Codeteil:

Code kopieren Der Code lautet wie folgt:
/**
* Paginierung js
​*/ 
var Seite; 
 
(function(){ 
        var Page = {version:"1.0",author:"liuxingmi"}; 
        var showPage = 9; 
        Page.navigation = function(divId, totalRecord, totalPage, currentPage, func){ 
            var nav = '
    '; 
                       nav = '
  • 总记录数:' totalRecord '
  • '; 
                       nav = '
  • 总页数:' totalPage '
  • '; 
                       nav = '
  • 当前页:' currentPage '
  • '; 
                       if(currentPage == 1){ 
                           nav = '
  • 首页
  • '; 
                           nav = '
  • 前一页
  • '; 
                       } else {                     
                           nav = '
  • 首页
  • '; 
                           nav = '
  • 前一页
  • '; 
                       } 
                       nav = '
    1. '; 
                               var start = currentPage - Math.floor(showPage/2); 
                               var end = currentPage Math.floor(showPage/2);
                               if(end > totalPage){ 
                                   start -= (end - totalPage); 
                               } 
                                
                               if(start <= 0){ 
                                   Start = 1;  
                               } 
                               if(currentPage < showPage && end < showPage){ 
                                  end = showPage;   
                               } 
                                
                               if(end > totalPage){ 
                                   end = totalPage; 
                               } 
                               for(var i = start; i <= end; i ){ 
                                   if(i == currentPage){ 
                                       nav = '
    2. ' i '
    3. '; 
                                   } else {                                 
                                       nav = '
    4. ' i '
    5. '; 
                                   } 
                               } 
                                
                               nav = '
  • '; 
                             if(currentPage == totalPage){ 
                                 nav = '
  • 后一页
  • '; 
                                 nav ='
  • 尾页'; 
                             } else { 
    nav = '
  • '; nav ='
  • Letzte Seite';                                                       nav = '
';                 $("#" divId).html(nav);                                                             };                               This.Page = Seite;
})();



CSS-Teil:

Code kopieren

Der Code lautet wie folgt:/*Seitenumbruchstil beginnt*/ .pagination{ Überlauf: versteckt; Rand:0 0 0 25px; Polsterung: 10px 10px 6px 150px; border-top:1px solid #c8c8c8; _zoom:1; Textausrichtung: Mitte;
}
.pagination *{
display:inline;
float:left;
Rand:0;
Polsterung:0;
Schriftgröße: 12px;
}
.pagination i{
float:none;
padding-right:1px;
}
.currentPage b{
float:none;
Farbe:#f00;
}
.pagination li{
Listenstil:none;
Rand:0 5px; }
.pagination li li{
Position:relativ;
margin:-2px 0 0; Schriftfamilie: Arial, Helvetica, serifenlos
}
.firstPage a,. previousPage a,.nextPage a,.lastPage a{
Überlauf: versteckt;
Höhe:0;
text-indent:-9999em;
border-top:8px solide #fff; border-bottom:8px solid #fff; }
.pagination li li a{
Rand:0 1px; padding:0 4px; border:3px double #fff; border-color:#eee;
Hintergrund:#eee;
Farbe:#06f;
Textdekoration: keine;
}
.pagination li li a:hover{
Hintergrund:#f60;
Rahmenfarbe:#fff;
Rahmenfarbe:#f60;
Farbe:#fff;
}
li.firstPage{
margin-left:40px;
border-left:3px solid #06f; }
.firstPage a,. previousPage a{
border-right:12px solid #06f; }
.firstPage a:hover,. previousPage a:hover{
border-right-color: #f60; }
.nextPage a,.lastPage a{
border-left:12px solid #06f; }
.nextPage a:hover,.lastPage a:hover{
border-left-color:#f60;
}
.pagination li.lastPage{
border-right:3px solid #06f; }
.pagination li li.currentState a{
Position:relativ;
Rand: -1px 3px; Polsterung: 1px 4px; border:3px double #fff; Rahmenfarbe:#f60;
Hintergrund:#f60;
Farbe:#fff;
}
.pagination li.currentState,.currentState a,.currentState a:hover{
border-color:#fff #ccc
Cursor:Standard;
}
/*Ende des Paging-Stils*/



Aufrufmethode:






Code kopieren


Der Code lautet wie folgt:
Page.navigation("pageNav", 100, 10, 1, "xxxList");

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie sende ich eine Postanforderung mit JSON -Daten mithilfe der Curl -Bibliothek von PHP? Wie sende ich eine Postanforderung mit JSON -Daten mithilfe der Curl -Bibliothek von PHP? Apr 01, 2025 pm 03:12 PM

Senden von JSON -Daten mithilfe der Curl -Bibliothek von PHP in der PHP -Entwicklung müssen häufig mit externen APIs interagieren. Eine der gängigen Möglichkeiten besteht darin, die Curl Library zu verwenden, um Post � ...

Wie kann man Node.js oder Python -Dienste in Lampenarchitektur effizient integrieren? Wie kann man Node.js oder Python -Dienste in Lampenarchitektur effizient integrieren? Apr 01, 2025 pm 02:48 PM

Viele Website -Entwickler stehen vor dem Problem der Integration von Node.js oder Python Services unter der Lampenarchitektur: Die vorhandene Lampe (Linux Apache MySQL PHP) Architekturwebsite benötigt ...

Wie konfigurieren Sie die Timing -Timing -Aufgabe von ApScheduler als Dienst auf macOS? Wie konfigurieren Sie die Timing -Timing -Aufgabe von ApScheduler als Dienst auf macOS? Apr 01, 2025 pm 06:09 PM

Konfigurieren Sie die Timing -Timing -Timing -Timing -Timing auf der MacOS -Plattform, wenn Sie die Timing -Timing -Timing -Timing von APScheduler als Service konfigurieren möchten, ähnlich wie bei NGIN ...

Wie verwende ich in Langchain AgentExecutor, um die Funktion 'Initialize_agent' zu ersetzen? Wie verwende ich in Langchain AgentExecutor, um die Funktion 'Initialize_agent' zu ersetzen? Apr 01, 2025 pm 04:18 PM

Wie ersetzt ich die Funktion "Initialize_agent" in Langchain? In der Langchain -Bibliothek initialize_agent ...

Können Python -Parameteranmerkungen Zeichenfolgen verwenden? Können Python -Parameteranmerkungen Zeichenfolgen verwenden? Apr 01, 2025 pm 08:39 PM

Alternative Verwendung von Python -Parameteranmerkungen in der Python -Programmierung, Parameteranmerkungen sind eine sehr nützliche Funktion, die den Entwicklern helfen kann, Funktionen besser zu verstehen und zu verwenden ...

Kann der Python -Dolmetscher im Linux -System gelöscht werden? Kann der Python -Dolmetscher im Linux -System gelöscht werden? Apr 02, 2025 am 07:00 AM

In Bezug auf das Problem der Entfernung des Python -Dolmetschers, das mit Linux -Systemen ausgestattet ist, werden viele Linux -Verteilungen den Python -Dolmetscher bei der Installation vorinstallieren, und verwendet den Paketmanager nicht ...

Wie Sie eine hohe Verfügbarkeit von MongoDB bei Debian gewährleisten Wie Sie eine hohe Verfügbarkeit von MongoDB bei Debian gewährleisten Apr 02, 2025 am 07:21 AM

In diesem Artikel wird beschrieben, wie man eine hoch verfügbare MongoDB -Datenbank für ein Debian -System erstellt. Wir werden mehrere Möglichkeiten untersuchen, um sicherzustellen, dass die Datensicherheit und -Dienste weiter funktionieren. Schlüsselstrategie: ReplicaSet: Replicaset: Verwenden Sie Replikaten, um Datenreduktion und automatisches Failover zu erreichen. Wenn ein Master -Knoten fehlschlägt, wählt der Replikate -Set automatisch einen neuen Masterknoten, um die kontinuierliche Verfügbarkeit des Dienstes zu gewährleisten. Datensicherung und Wiederherstellung: Verwenden Sie den Befehl mongodump regelmäßig, um die Datenbank zu sichern und effektive Wiederherstellungsstrategien zu formulieren, um das Risiko eines Datenverlusts zu behandeln. Überwachung und Alarme: Überwachungsinstrumente (wie Prometheus, Grafana) bereitstellen, um den laufenden Status von MongoDB in Echtzeit zu überwachen, und

PostgreSQL -Überwachungsmethode unter Debian PostgreSQL -Überwachungsmethode unter Debian Apr 02, 2025 am 07:27 AM

In diesem Artikel werden eine Vielzahl von Methoden und Tools eingeführt, um PostgreSQL -Datenbanken im Debian -System zu überwachen, um die Datenbankleistung vollständig zu erfassen. 1. verwenden Sie PostgreSQL, um die Überwachungsansicht zu erstellen. PostgreSQL selbst bietet mehrere Ansichten für die Überwachung von Datenbankaktivitäten: PG_STAT_ACTIVITY: Zeigt Datenbankaktivitäten in Echtzeit an, einschließlich Verbindungen, Abfragen, Transaktionen und anderen Informationen. PG_STAT_REPLIKATION: Monitore Replikationsstatus, insbesondere für Stream -Replikationscluster. PG_STAT_DATABASE: Bietet Datenbankstatistiken wie Datenbankgröße, Transaktionsausschüsse/Rollback -Zeiten und andere Schlüsselindikatoren. 2. Verwenden Sie das Log -Analyse -Tool PGBADG

See all articles