Bei der Entwicklung begegnen wir häufig Paginationsprobleme, insbesondere für einen Back-End-Programmierer, aber dieses Problem kann nicht gelöst werden. Daher fanden wir eine Paginationskontrolle und haben sie für die zukünftige Verwendung aufgezeichnet.
Hier sind einfache Beispiele, die auf der offiziellen Website verwendet werden:
// Im Folgenden wird eine asynchrone Seite $ .getJson ('test/Demo1.json', {curr: 6}, function (res) {// Anfrage ab Seite 6. Das zurückgegebene JSON -Format kann das Layout definieren ({cont: 'page1', // Container. Der Wert unterstützt id name, native Dom -Objekte und JQuery -Objekt. id="page1"></div> pages: res.pages, //Total number of pages obtained through the background curr: 6, //Initialize the current page jump: function(e){ //Calling the callback after triggering the page $.getJSON('test/demo1.json', {curr: e.curr}, function(res){ e.pages = e.last = res.pages; //Retrieve the total number of Seiten müssen Sie nicht schreiben. }); });Ein grundlegender Paginationseffekt wird herauskommen.
Wenn Sie weitere großartige Effekte benötigen, ändern Sie bitte den Quellcode.
Lassen Sie uns zuerst darüber sprechen, wenn die Auswirkung einer Pagination vorgestellt wird.
Beziehen Sie sich zunächst auf das Kontrolllayout.js
<script type = "text/javaScript" src = "/lib/laypage/laypage.js"> </script>
Plugin -Download -Adresse:
Schauen wir uns nun die Plugin -Konfiguration an:
Function SearchJoinMemberInfopage () {var ccid = parseInt ($ ("#hid_ccid"). Val (), 10); var SaveKey = $ ("#targetKey"). val (); var pageSize = 10; // Im Folgenden wird jQuery.ajax als Beispiel verwendet, um eine asynchrone Seite $ .getJson ('/mobil/ajaxHandler/fundajax.aspx? Action = getRedisjoinMemberinformationById', {Typ: 2, ccid: ccid, pageIndex: 1, pagessize: pagessize: pagessize: pagessize, pagessize, pagessize, pageske, zu returned json format can arbitrarily define layout({ cont: 'page1', //Container. The value supports id name, native dom object, and jquery object. [If the container is]: <div id="page1"></div> pages: res.pageCount, //Total number of pages obtained through the background curr: 1, //Initialize the current page skin: '#429842',//Skin color Gruppen: 3, // Anzahl der Seiten überspringen kontinuierlich überspringen: true, // ob die Seitensprung zuerst öffnen: 'Homepage', // Wenn nicht angezeigt wird, false Last: 'Letzte Seite', // Wenn nicht angezeigt wird, setzen $.getJSON('/Mobile/AjaxHandler/QuestionAjax.aspx?action=GetRedisJoinMemberInformationById', { type: 2, ccId: ccId, pageIndex: e.curr,//The current page pageSize: pageSize, saveKey: saveKey }, function (res) { e.pages = e.last = res.pageCount; //Retrieve the total number of pages, generally no Muss schreiben // Var View = Dokument/Mobile/ajaxHandler/questionajax.aspx?action=getRedisjoinMemberInformationById Zeigt eine asynchrone Adresse an, die die zu angezeigten Daten und die Anzahl der Seiten zurückgibt. Typ:
2.
Packagdata (res); Diese Funktion analysiert die zurückgegebenen Daten und rendert sie.
Der userTable ist der DOM -Knoten, der zur Anzeige der zurückgegebenen Daten verwendet wird, und Seite1 ist der DOM -Knoten, mit dem die Schaltfläche für die Anzahl der Seiten angezeigt wird.
Sehen Sie nun den Effekt:
Es ist eigentlich sehr einfach, und dies vervollständigt ein Paginierungsdisplay.
Vielen Dank für Ihre Lektüre und ich hoffe, Sie werden weiterhin auf aufregende Inhalte von Wulin.com achten.