Schauen Sie sich zunächst die Implementierungsrenderungen an. Wenn Sie der Meinung sind, dass es nicht schlecht ist, wenden Sie sich bitte an den Implementierungscode.
Die oben genannten Daten sind unten ausgelegt
Wie man benutzt
1 CSS von Bootstrap importieren
<link rel = "stylesheet" href = "css/v3/bootstrap.min.css">
2 Import JQuery
<script src = "js/jQuery-1.10.1.min.js" type = "text/javaScript"> </script>
3 Tisch Paging Plugin ltable.js importieren
<script src = "js/ltable.js" type = "text/javaScript"> </script>
4 Fügen Sie HTML -Tag hinzu und weisen Sie der ID Werte zu, die Werte zuweisen
<!-Tabelle-> <div id = "d"> </div> <!-Pagination-> <div id = "u"> </div>
5 Daten abrufen
Erhalten Sie hier die simulierten Daten der JSON -Datei über AJAX
Intierbar (Daten) ist die Methode zur Initialisierung von Tabellen und zum Pagen
$ .ajax ({url: "json/data.json", type: "get", dataType: "json", Erfolg: Funktion (Daten) {initzierbar (data);}, Fehler: Funktion (e) {alert ("Datenerfassungsfehler");}});6 Initialisieren Sie die Tabelle
Initialisieren Sie die Tabelle zuerst in der Initialisierungsmethode
var obj = data; var mytable = $. Name: ["UserId", "Benutzername", "Passwort", "Berechtigungsname", "Status", "_ opt"], TID: "UserId", Kontrollkästchen: "UserId"});
Code Beschreibung
6.1 Initialisierungsmethode
$ .ltable ('id', {Daten, Titel, Name, TID, Tschechbox});
6.2 Attributbeschreibung
ID: Der von der Seite ausgewählte Füllblock
Daten: JSON -Daten auf der Seite angezeigt
Titel: Feld, das Daten für jede Spalte der Tabelle entspricht
Name: Die erste Zeile der Tabelle zeigt das Feld an
TID: Der entsprechende Schlüsselwert jeder Zeile (kann weggelassen werden)
Kontrollkästchen: Wert entsprechend dem Kontrollkästchen (kann weggelassen werden)
6.3 Kontrollkästchen Beschreibung
Aktivieren Sie beim Hinzufügen von Tschechbox -Attribut init
Kontrollkästchen Name = "ids"
Holen Sie sich die ausgewählte Spaltenmethode: $ .ltable.getCheckBoxIds () Return Value Beispiel "1,2,3,4"
6.4 Betriebsanweisungen
Wenn der Attributname = _opt, ändert der Tabellenheader automatisch die Position "Operation".
Der entsprechende Attributtitel kann Schaltflächen und andere Operationen hinzufügen
Beispiel: "<button onclick = 'updf (id)'> modify </button>"
Die Klickmethode lautet Updf (). Die Parameter -ID ist das entsprechende Feld des Attributs.
7 Initialisieren Sie die Pagination
Dann der Paginationsteil
$ .lpaging ('#U', // entsprechende ID {pageNumber: obj.pagenumber // aktuelle Seitennummer, Gesamtpage: Obj.Totalpage // Gesamtseitennummer, Zählung: 5 // Anzahl der angezeigten Seiten (CAN DELUST), count: Obj.Count, InputSearch: TRUE: TRUE // Die Abfragen -Eingangsbox, Onpagg -Funktion (num. DataUrl);Code Beschreibung
7.1 Initialisierungsmethode
$ .lpaging ('id', {pageNumber, TotalPage, Countsize, Count, OnPaGechange (num), InputSearch});
7.2 Attributmethode Beschreibung
ID: Der von der Seite ausgewählte Füllblock
Pagenumber: Aktuelle Seitennummer
Gesamtseite: Gesamtseitenanzahl
Zählung: Die Anzahl der Seitenanzeigen (der Standard -5 kann weggelassen werden)
Anzahl: Gesamtzahl der Daten
OnpaGechange (Num): Gibt das Klickereignis zurück
InputSearch: Ob das Abfrageingangsfeld boolean Standard falsch angezeigt werden soll
getInputval (): Gibt die Nummer im Eingabefeld zurück
8 Der gesamte Code
<!DOCTYPE html><html><head><meta charset="utf-"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><link rel="stylesheet" href="css/v/bootstrap.min.css"></head><body><!-- Table--><div id = "d"> </div> <!-pagination-> <div id = "u"> </div> </body> <script src = "js/jQuery -... min.js" type = "text/javascript"> </script> <script Src = "js/ltable.js" type = "text/javascript". DataUrl = ""; // Initialisieren Sie die Seite initialisieren (, pageSize, ""); // Ajax Ruft die Datenfunktion ab initpage (num, ps, url) {$. ajax ({url: "json/data.json", type: "get", // type: "post", // data: "userInfovo.pageId ="+num+"& userInfovo.pagecount ="+ps, datatype: "json", "json", "json", "json", "json", "json", "json", "json", "json", "json", "json", "json", "json", "json", "json", "json" Erfolg: Funktion (Daten) {inendable (data);}, Fehler: Funktion (e) {console.log (e) alert ("Datenerfassungsfehler");}});} // Initialisierung der Tabelle und Lebendatenfunktion initial (Data) {// var obj = eval ("+Daten+") ")"); obj = data; // TablemyTable = $. Name: ["userId", "Benutzername", "Passwort", "Berechtigungsname", "Status", "_ opt"], TID: "UserId", Kontrollkästchen: "UserId"}; // mytable.getCheckBoxids (); // Erhalten Sie den Wert, der nach Kontrollkästchen ausgewählt wird {initpage (num, pageSize, dataurl);}});} // Methodenfunktion updf (id) {alert ("modify:"+id);} // Methodenfunktion Delf (ID) {alert ("Delete:"+id);} </script> </html>>Wulin.com empfiehlt Bootstrap -bezogene Themen:
Bootstrap -Komponenten Betriebsfähigkeiten
Zusammenfassung des Kenntnisses im Zusammenhang mit Bootstrap
Das obige ist die detaillierte Erläuterung des Plug-in-Plug-in-Plug-in-Bootstrap3-Plugs und der vom Editor vorgestellten Paging-Plug-in-Beispiele. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!