Das neueste ASP.NETMVC -Projekt erfordert die Klassifizierung von Datenlisten. Dies ist ursprünglich ein Backend, das basierend auf Bootstrap entwickelt wurde. Daher frage ich mich, ob Bootstrap ein Paging-Plug-In oder eine von JQuery unterstützte Paging-Funktion hat, damit der gesamte Backend-Stil der Website einheitlich sein kann, ohne selbst eine Reihe von Paging-Funktionen zu schreiben.
Das erste ist, den Bootstrap -Paginator herunterzuladen. Download -Adresse: Bootstrap -Paginator -Paginator -Plugin
Zunächst sollten die JS- und CSS -Dateien über der Ansicht eingeführt werden. Es gibt drei Hauptdateien, nämlich die JS -Dateien von CSS, JQuery und Paginator. Ich habe online gesucht und es scheint, dass JQuery Version 1.8 oder höher sein muss, ich habe dies nie persönlich getestet. Die Dateireferenz der Ansicht lautet also:
<link href = "css
Dann ist die Paginationsfunktion natürlich eine lokale Aktualisierung, die auf Ajax basiert, um uns anzulocken, und dies erfordert natürlich die Unterstützung von JQuery. Früher habe ich Easyui Paging gemacht, und diesmal sollte es etwas anders sein.
<Script> $ (function () {var carid = 1; $ .ajax ({url: "/oa/seting/getdate", dataType: 'json', type: "post", data: "id =" + carid, Erfolg: function (Data) {if (Data! = null) {$. $ ("#liste"). $ ("#liste"). $ ("#list"). append ('<tbody>'); $ ("#list"). append ('<td> Bemerkung </td>'); ); "> Löschen </button> '); $ ("#list"). Typ) var currentpage = eval ("(" + data + ")). CurrentPage; "Vorherige Seite"; "page =" + Seite, Erfolg: Funktion (data1) {if (data1! $ ("#list"). append ('<Th> id </th>'); $ ("#list"). $ ("#list"). append ('<td>' + item.name + '</td>'); $ ("#list"). append ('<button onclick = "edit (' + item.id + ');"> modify </button>'); $ ("#list"). append ('</tr>'); $ ("#list")Im Hauptteil der Ansicht gibt es zwei Divs, eine zum Präsentieren der Datenliste und die andere zum Platzieren der Navigation der Auswahlseite.
<Viv> <label> Abteilungsliste </label> <hr/> <div id = "list"> </div> <div id = "Beispiel"> </div> </div>
Die GetDate -Methode im Hintergrund ist wie folgt:
public actionResult getDate (int id, int? Seite) {int pageIndex = Seite ?? 1; // Die aktuelle Seite const int pageSize = 2; // Dies wird verwendet, um die Anzahl der auf jeder Seite angezeigten Daten festzulegen. Es wird empfohlen, dies an web.config zu schreiben, um die Abteilungsdaten zu erhalten. // Die Anzahl der Daten int rowCount = list.count () abrufen; // Durch Berechnung ist es notwendig, die Seite in mehrere Seiten zu unterteilen. Die Daten, die weniger als eine Seite sind, werden gemäß einer Seite berechnet, wenn (RowCount%pageSize! = 0) {rowCount = rowCount / pageSize + 1; } else {rowCount = rowCount / pageSize; } // in JSON Format var Strresult = "{/" pageCount/":"+rowCount+",/" currentPage/":"+pageIndex+",/" list/":"+jsonconvert.serializeBject (Liste)+"}"; return JSON (Strresult, JsonRequestBehavior.AllowGet); }Diese Methode ist immer noch etwas fehlerhaft und kann perfekter geschrieben werden, genau wie das obige PageSize global geändert werden kann, indem die Konfigurationsdatei web.config gelesen wird, die zweckmäßig zu verwalten ist. Zusätzlich können Sie Informationen wie Seitenattribute: Seitennummer, aktuelle Seite, Datenmenge usw. erhalten, um Informationen zu speichern. Wenn das Projekt der Website größer ist, ist es für uns bequemer, unseren eigenen Code zu ändern.
Der endgültige Display -Effekt ist wie folgt:
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist die Verwendung des Bootstrap-Paginator-Paging-Plug-Ins, das ich mit Ihnen geteilt habe. Ich hoffe, dass es für Sie hilfreich ist, die Verwendung des Bootstrap-Paginator-Paging-Plug-Ins zu beherrschen.