Étant donné que le plugin de pagination utilisé par le module précédent dans le projet était des dataTables, il est très pratique, mais la mise en page dans le tableau de module nouvellement fabriqué a changé et que le plugin de données ne peut pas le rencontrer. Afin d'unifier le style et ne veulent pas passer et faire écho aux paramètres de requête sur la page, la solution d'implémentation de rafraîchissement partiel La page est adoptée.
Le plan de mise en œuvre est comme ceci: extraire la partie du tableau et utilisez-la comme partie du rafraîchissement partiel de la page. Le nom du fichier est list-data.vm
<Bile> <Thead> <Tr> <Th> Nom d'utilisateur </th> <th> Âge </th> </tr> </thead> <tbody> #Foreach ($ Data dans $! {Page.List}) <Tr> <Td> $! {data.usename} </ td> <td> $! {data.sex} </td> </consie #Pagenation ($! {page})La pagenation est une macro définie par la définition, qui est utilisée pour afficher la barre de page inférieure et la barre de page. L'objet page est les données de page renvoyées par la demande AJAX. Chaque demande AJAX, interrogez les données PAGED, mettez les données dans l'objet ModelAndView de la vue correspondant à List-Data.vm, puis renvoyez l'objet ModelAndView, ajoutez cette pièce à la pièce où se trouve le tableau de page principal.
La partie macro est la suivante:
#macro (pagenation $ data) #if (! $ data.list.size () ou $ data.list.size () == 0) <div style = "height: 40px; line-height: 40px; text-align: Center; Font-size: 14px;"> enregistrer non trouvé </div> #end #if ($ data.lit.Size () et $ data.Size.) id = "activitéTable_info" role = "status" aria-live = "polite"> show $! {data.startrow} à $! {data.endrow} Résultats des éléments, total $! {data.total} $ {data.nextpage}) <a #if ($ data.pagenum == 1) Disabled = "Disable style = "margin-left: 2px;" > Accueil </a> <a #if ($ data.pagenum == 1) Désable = "Disable style = "margin-left: 2px;" > Page précédente </a> #set ($ temp = $ {data.pagenum} - 1) #set ($ nombres = $! {Pageutil.numbers ($ temp, $ data.pages)}) #Forach ($ foo dans $ nombres) #if ($ foo == -999) <span>… </ span> #else <a pagenum = "$ foo" #if ($ foo! = $ {data.pagenum}) href = "javascript: goPage ($ foo)" rel = "external nofollow" #end style = "margin-left: 2px;" > $ foo </a> #end #end <a #if ($ data.pagenum == $ data.pages) handicapé = "Disabled" #else pagenum = "$ nextnpage" href = "javascript: goPage ($ nextnpage)" rel = "external nofollow" #end style = "margin-left: 2px;" > Page suivante <a #if ($ data.pagenum == $ data.pages) Disabled = "Disable nofollow "#else pagenenum =" $ data.pages "href =" javascript: gopage ($ data.pages) "rel =" external nofollow "#end> dernière page </a> Accédez à la <id input =" changepage "type =" text "maxpage =" 10 "style =" hauteur: 28px; line-height: 28px; witret: width: 40px; " id = "dataTable-btn" href = "javascript: jumppage ($ data.pages);" rel = "external nofollow" style = "margin-bottom: 5px"> confirmer </a> #end </ div> <div p_sortinfo = "$! {data.orderby}" p_isfirst = $! {data.isfirst} p_islast = $! {data.islast} p_currentPagem = "$! {data." " p_totalsize = "$! {data.total}" p_endrow = "$! {data.endrow}" p_totalpagesNum = "$! {data.pages}" p_pageSize = "$! {data.pagesize}" p_startrow = "$! {data.starTrow}" style = "Afficher: non"PageUtil est une classe d'outils écrite dans la boîte à outils Velocity, qui est utilisée pour imiter la logique du numéro de page de pagination Affichage des barres de pagination des données:
classe publique PageUtil {public static LinkedList <Integer> gamme (Integer len, Integer start) {LinkedList <Integer> out = new LinkedList <> (); Fin entier; if (start == null) {start = 0; end = len; } else {end = start; start = len; } pour (int i = start; i <end; i ++) {out.add (i); } return out; } public static List <Integer> Nombres (page entière, pages entières) {linkedList <Integer> nombres = new LinkedList <> (); Boutons entiers = 7; Entier demi-= boutons / 2; if (pages <= boutons) {nombres = plage (0, pages); } else if (page <= half) {nombres = range (0, boutons-2); nombres.add (-1000); nombres.add (pages-1); } else if (page> = pages - 1 - mi-temps) {nombres = range (pages- (Buttons-2), pages); nombres.AddFirst (-1000); // put nombres.addFirst (0); } else {nombres = range (page-1, page + 2); nombres.add (-1000); nombres.add (pages-1); nombres.AddFirst (-1000); nombres.AddFirst (0); } List <Integer> res = new ArrayList <> (); pour (entier entier: nombres) {res.add (entier + 1); } return res; }}Et cette logique se trouve dans le code source JS des données, et je l'ai convertie en code Java. Cette partie du code source du code des données est la suivante
fonction _numbers (page, pages) {var nombres = [], boutons = extpagination.numbers_length, half = math.floor (boutons / 2), i = 1; if (pages <= boutons) {nombres = _Range (0, pages); } else if (page <= half) {nombres = _Range (0, Buttons-2); nombres.push ('ellipsis'); nombres.push (pages-1); } else if (page> = pages - 1 - mi-temps) {nombres = _Range (pages- (Buttons-2), pages); nombres.splice (0, 0, «ellipsis»); // Pas de décalage dans les nombres IE6.splice (0, 0, 0); } else {nombres = _Range (page-1, page + 2); nombres.push ('ellipsis'); nombres.push (pages-1); nombres.splice (0, 0, «ellipsis»); nombres.splice (0, 0, 0); } nombres.dt_el = 'span'; Numéros de retour; } var _Range = fonction (len, start) {var out = []; var end; if (start === Undefined) {start = 0; end = len; } else {end = start; start = len; } pour (var i = start; i <end; i ++) {out.push (i); } return out; };J'ai résumé les données de pagination de la demande Ajax de la page:
/ ** * * / // Page de pagination de macro Jump pour appeler la méthode, la page appelée doit fournir la fonction de méthode goPage (redirectPage) JumpPage (totalPage) {var redirectPage = $ ("# ChangePage"). Val (); if (redirectPage == "") {$ ("# changePage"). focus (); } else {var rex = / ^ / d + $ /; if (! rex.test (redirectPage)) {alert ("Le numéro de page est incorrectement entré, vous ne pouvez entrer qu'un entier positif qui n'est pas supérieur au nombre total de pages"); } else {var pageno = parseInt (redirectPage); if (pageno <= 0 || pageno> totalpage) {alert ("Le numéro de page est incorrectement entré, seulement des entiers positifs qui ne sont pas supérieurs au nombre total de pages"); } else {goPage (redirectPage)}}}}} $ .fn.pageation = function (options) {// Paramètres par défaut var par défaut = {url: "", data: {}, // Paramètre Pageno: 1, // Numéro de page PageSize: 10, // Taille de la page PageSuccess: {} // Fonction de ballon Retour par pagination PAGINESUCSE: {} // Fonction de bal _self = $ (this); options = $ .extend (par défaut, options); 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! = Undefined) {ajaxdata ['pageno'] = pageno; } $ .ajax ({url: options.Url, async: false, type: "post", data: ajaxdata, succès: function (result, code, dd) {_self.html (result); if (typeof options.pagesuCcess == 'function') {options.pagesCess ();}}, error: function () {alert (");); }); }; this.init = function () {this.fndraw (1); retourner ceci; } retourne ceci; }Appelez sur la page principale:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> insérer le titre ici </ title> #set ($ ctx = $ {request.getContextPath ()}) <link rel = "stylesheet" type = "text / css" href = "$ ctx / actifs / js / dataTables / jQuery.datatables.min.css" rel = "external nofollow" /> <link rel = "Stylesheet" type = "text / css" href = "$ ctx / actifs / js / dataTables / css / jQuery.datatables_thème.css" rel = "redal /> <script type = "text / javascript" src = "$ ctx / actifs / js / jQuery-1.11.2.min.js"> </ script> <script type = "text / javascript" src = "$ ctx / actifs / js / macro.pagination.js"> </ script> </ head> <body> type = "text / javascript"> var pagenation = $ ("# pagediv"). pagenation ({url: "$ {ctx} /listdata.do", pagesize: 20, data: function (data) {$ ("# searchform [name]"). chaque (fonction (i, n) {data [$). data; fonction goPage (pageno) {pagenation.fndraw (pageno); } </ script> </ body> </html>Le paramètre pages du Conscess est utilisé pour certaines opérations qui doivent être effectuées après que l'AJAX renvoie les données avec succès.
Ce que j'ai dit ici n'est pas clair. L'adresse git jointe au cloud de code est: http://git.oschina.net/ivwpw/pagenation
Il n'y a aucune partie de l'insertion de données de la base de données, mais il ne simule que les données requises par la page du contrôleur.
L'article ci-dessus Springmvc + Velocity's Partial Refresh Pagination Méthode pour imiter les dataTables est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.