Da das vom vorherige Modul im Projekt verwendete Paginierungs -Plugin DataTables war, ist es sehr bequem, das Layout in der neu hergestellten Modultabelle hat sich jedoch geändert, und das Plugin von DataTables kann es nicht erfüllen. Um den Stil zu vereinen und die Abfrageparameter auf der Seite nicht zu übergeben und wiederzugeben, wird die Implementierungslösung der teilweisen Auffrischung der Seite angewendet.
Der Implementierungsplan ist wie folgt: Extrahieren Sie den Tabellenteil und verwenden Sie ihn als Teil der Seite teilweise Aktualisierung. Der Dateiname ist list-data.vm
<table> <Thead> <tr> <Th> Benutzername </th> <Th> Alter </th> </tr> </thead> <tbody> #foreach ($ data in $! {page.list}) <tr> <tby> $! {data.username} </td> <tbody; #Pagenation ($! {Seite})Die Pagenierung ist ein Makro, das durch die Definition definiert ist, mit der die untere Seitenleiste und die Seitenleiste angezeigt werden. Das Seitenobjekt ist die Seitendaten, die von der AJAX -Anforderung zurückgegeben werden. Jede AJAX-Anfrage, die PAGED-Daten abfragen, die Daten in das Modell von ModelAndView der Ansicht geben, die Listendaten.VM entspricht, und dann das ModelAndView-Objekt zurückgeben, diesen Teil an den Teil anhängen, in dem sich die Hauptseite Tabelle befindet.
Der Makroteil lautet wie folgt:
#Macro (pagenation $ data) #if (! id = "ActivityTable_info" rollen = "status" aria-live = "politit"> $! {data.starTrow} bis $! {data.endrow} Elementergebnisse, Gesamt $! {data.total} items </div> <div id = "pagination"> #$ prevpage = $ {Data.prepage}) #$ {{Data {Data {Data.prepage}) #$ {{Data {Data {Data.prepage}) #$ {{Data {Data {Data {Data {Data.prepage}) #$ {{Data {Data {Data {Data.prepage}) #$ {{Data {Data {Data {Data {Data {Data.prepage}). ${data.nextPage}) <a #if($data.pageNum ==1) disabled="disabled" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" #else pageNum="1" href="javascript:goPage(1)" rel="external nofollow" #end style = "margin-links: 2px;" > Home </a> <a #if ($ data.pagenum == 1) disabled = "deaktiviert" href = "JavaScript: void (0)" rel = "externe nofollow" rel = "external nofollow" #else pagenum = "$ prevpage" href = "javas: gopplow ($ prevPage)" rel = "external" external "external" external "external" external "external" external "external" external "external" external "external" external "external" external nlowlool ($ prevPage) "rel style = "margin-links: 2px;" > Vorherige Seite </a> #set ($ temp = $ {data.pagenum} - 1) #set ($ numbers = $! {Pageutil.numbers ($ temp, $ data.pages)}) #Forach ($ foo in $ number) #if ($ foo == -999) </span> ... #if ($ foo! > $ foo </a> #end #end <a #if ($ data.pagenum == $ data.pages) disabled = "deaktiviert" #else pagenum = "$ nextnpage" href = "javascript: gopage ($ nextnpage)" rel = "external nofloxi-#end style =" margin-left: 2px; " > Next page<a #if($data.pageNum == $data.pages) disabled="disabled" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" #else pageNum="$data.pages" href="javascript:goPage($data.pages)" rel="external nofollow" rel="external nofollow "#Else pagenum =" $ data.pages "href =" javaScript: gopage ($ data.pages) "rel =" externe nofollow "#end> Letzte Seite </a> Gehen Sie zur <Input-ID =" ChangePage "Typ =" text "maxpage =" 10 "Style =" Height: 28px; id = "DataTable-Btn" href = "JavaScript: Jumppage ($ data.Pages);" rel = "externer nofollow" style = "margin-bottom: 5px"> bestätigen </a> #end </div> <div p_sortinfo = "$! {data.Ordby}" p_isfirst = $! {data.isfirst} p_islast = $! {data.islast} p_curentpagene = "$" {{data.last} p_curent} "" p_totalSize = "$! {data.total}" p_endrow = "$! {data.endrow}" p_totalpagesnum = "$! {data.pages}" p_PageSize = "$! {Data.Pagessize}" p_startrow = "$! $!PageUtil ist eine Werkzeugklasse, die in der Geschwindigkeits -Toolbox geschrieben wurde und die Logik der Paginationsseitennummer Anzeige von Datatables -Paging -Balken imitieren wird:
public class pageuutil {public static linkedList <GanzEger> Range (Integer len, Integer start) {LinkedList <Neger> out = new LinkedList <> (); Ganzzahlende; if (start == null) {start = 0; Ende = Len; } else {end = start; start = len; } für (int i = start; i <end; i ++) {out.add (i); } kehre aus; } öffentliche statische Liste <Ganzzahl> Nummern (Integer -Seite, Integer Pages) {LinkedList <Ganzzahl> numbers = new LinkedList <> (); Ganzzahlknöpfe = 7; Ganzzahl halb = buttons / 2; if (Seiten <= buttons) {number = Bereich (0, Seiten); } else if (Seite <= halb) {number = Bereich (0, buttons-2); numbers.add (-1000); numbers.add (Seiten 1); } else if (Seite> = Seiten - 1 - halb) {number = Bereich (Seiten- (Buttons -2), Seiten); nummern.addfirst (-1000); // numbers.addfirst (0); } else {numbers = Bereich (Seite 1, Seite+2); numbers.add (-1000); numbers.add (Seiten 1); nummern.addfirst (-1000); nummern.addfirst (0); } List <Integer> res = new ArrayList <> (); für (Integer Integer: Nummern) {res.add (Integer+1); } return res; }}Und diese Logik befindet sich im JS -Quellcode von DataTables, und ich habe ihn in Java -Code konvertiert. Dieser Teil des Quellcode Code of Datatables lautet wie folgt
Funktion _numbers (Seite, Seiten) {var numbers = [], buttons = extpagination.numbers_length, half = math.floor (Buttons / 2), i = 1; if (Seiten <= buttons) {number = _range (0, Seiten); } else if (Seite <= halb) {numbers = _range (0, buttons-2); nummern.push ('ellipsis'); nummern.push (Seiten 1); } else if (page> = pages - 1 - halb) {number = _range (Seiten- (buttons -2), Seiten); numbers.splice (0, 0, 'ellipsis'); // keine Schädigung in IE6 -Zahlen.SPLICE (0, 0, 0); } else {number = _range (Seite-1, Seite+2); nummern.push ('ellipsis'); nummern.push (Seiten 1); numbers.splice (0, 0, 'ellipsis'); numbers.splice (0, 0, 0); } numbers.dt_el = 'span'; Rückgabezahlen; } var _range = function (len, start) {var out = []; var Ende; if (start === undefiniert) {start = 0; Ende = Len; } else {end = start; start = len; } für (var i = start; i <end; i ++) {out.push (i); } kehre aus; };Ich habe die AJAX -Anfrage -Paginierungsdaten der Seite verkapselt:
/ ** * */ // Makro -Paginationsseite springen, um die Methode aufzurufen. Die aufgerufene Seite muss die GOPAGE (RedirectPage) -Methodenfunktion Jumppage (TotalPage) {var revercirectPage = $ ("#ChangePage"). Val () bereitstellen; if (redirectPage == "") {$ ("#ChangePage"). Focus (); } else {var rex =/^/d+$/; if (! rex.test (recirectPage)) {alert ("Die Seitenzahl wird falsch eingegeben, können Sie nur eine positive Ganzzahl eingeben, die nicht größer ist als die Gesamtzahl der Seiten"); } else {var pageno = parseInt (recirectPage); if (pageno <= 0 || pageno> TotalPage) {alert ("Die Seitenzahl wird falsch eingegeben, nur positive Ganzzahlen, die nicht größer als die Gesamtzahl der Seiten sind"); }else{ goPage(redirectpage) } } } } } $.fn.pagenation = function(options) { //Default parameters var defaults={ url:"", data:{},//Parameter pageNo:1,//Page number pageSize:10,//Page size pageSuccess:{}//Callback function returned by pagination data} var _self = $ (this); options = $ .extend (Standardeinstellungen, Optionen); var ajaxdata = {"pageno": options.pageno, "pageSize": options.pageSize}; this.fndraw = function (pageno) {if (typeof (options.data) == 'function') {ajaxData = options.data (ajaxdata); } else {ajaxData = $ .extend (ajaxdata, options.data); } if (pageno! = undefiniert) {ajaxdata ['pageno'] = pageno; } $ .ajax ({url: options.url, async: false, type: "post", data: ajaxdata, Erfolg: Funktion (Ergebnis, Code, dd) {_self.html (result); if (typeof options }); }; this.init = function () {this.fndraw (1); gib dies zurück; } zurückgeben; }Rufen Sie auf der Hauptseite an:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <title> Title hier </title> #set ($ ctx = $ {request.getContextPath ()}) <link rel = "styleSheet" type = "text/cs" " href = "$ ctx/assets/js/DataTables/jQuery.Datatable.min /> <script type="text/javascript" src="$ctx/assets/js/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="$ctx/assets/js/macro.pagination.js"></script> </head> <body> <div id="pageDiv"> </div> <script type = "text/javaScript"> var pagenation = $ ("#pagediv"). Daten zurückgeben; Funktion Gopage (pageno) {pagenation.fndraw (pageno); } </script> </body> </html>Der PageSuccess -Parameter wird für einige Vorgänge verwendet, die nach der erfolgreichen Rückgabe von AJAX erfolgreich durchgeführt werden müssen.
Was ich hier gesagt habe, ist nicht klar. Die an die Code -Cloud angehängte GIT -Adresse lautet: http://git.oschina.net/ivwpw/pagenation
Es gibt keinen Teil des Einfügens von Daten aus der Datenbank, aber es simuliert nur die von der Seite im Controller erforderlichen Daten.
Der obige Artikel SpringMVC+Velocity's Partials Refresh -Pagination -Methode zur Nachahmung von DataTables ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.