Debido a que el complemento de paginación utilizado por el módulo anterior en el proyecto era DataTable, es muy conveniente, pero el diseño en la tabla de módulos recién hecha ha cambiado, y el complemento DataTables no puede cumplirlo. Para unificar el estilo, y no quiere pasar y hacer eco de los parámetros de consulta en la página, se adopta la solución de implementación de la actualización parcial de la página.
El plan de implementación es así: extraiga la parte de la tabla y úsela como parte de la actualización parcial de la página. El nombre del archivo es list-data.vm
<table> <thead> <tr> <th> UserName </th> <th> Age </th> </tr> </thead> <tbody> #Foreach ($ data en $! {page.list}) <tr> <td> $! {data.Username} </td> <td> $! {data.sex} </td> </tr> #end </ttbody </tbod #Pagenation ($! {Page})La pagenación es una macro definida por la definición, que se utiliza para mostrar la barra de página y la barra de página. El objeto de página son los datos de la página devueltos por la solicitud AJAX. Cada solicitud de AJAX, consulte los datos pagados, coloque los datos en el objeto ModelAndView de la vista correspondiente a List-Data.vm, y luego devuelva el objeto ModelAndView, agregue esta parte a la parte donde está la tabla de página principal.
La parte macro es la siguiente:
#macro (Pagenation $ data) #if (! $ data.list.size () o $ data.list.size () == 0) <Div style = "altura: 40px; línea-height: 40px; text-align: font-size: 14px;"> registro no encontrado </div> #end #iF ($ data.list.list.size () y $ data.list () (). id = "ActivityTable_info" role = "status" aria-live = "Pollite"> show $! {data.starTrow} a $! {data.endrow} resultados del elemento, total $ {data.total} items </div> <ivi = "Pagination"> #set ($ prevpage = $ {data.pepage}) $ {data.nextPage}) <a #if ($ data.pageNum == 1) Disabled = "Disabled" href = "javaScript: void (0)" rel = "nofollow" rel = "externo nofollow" #else pagenum = "1" href = "javascript: gopage (1)" rel = "externo nofollow" #end style "#end stelle" maremos: "maremos:" maremos: "maremos:" maremos: "maremos:" marrón ":" > Inicio </a> <a #if ($ data.pageNum == 1) Disabled = "Disabled" href = "javascript: void (0)" rel = "nofollow externo" rel = "nofollow" #Else pagenum = "$ prevpage" href = "javaScript: gopage ($ prevpage)" rel = "externo nofuga" #end steller " #-line" > Página anterior </a> #set ($ temp = $ {data.pagenum} - 1) #set ($ números = $! {PageUtil.numbers ($ temp, $ data.pages)}) #foreach ($ foo en $ numbe) #if ($ foo == -999) <pan> ... </span> #else <a pagenum = "$ foo" #if ($ foo! = $ {data.pagenum}) href = "javascript: gopage ($ foo)" rel = "externo nofollow" #end style = "margin-left: 2px;" > $ foo </a> #end #end <a #if ($ data.pagenum == $ data.pages) discapacitado = "discapacitado" #else pagenum = "$ nextpage" href = "javascript: gopage ($ nextnpage)" rel = "nofollow externo" #end style = "margin-olft: 2px;" ""; "" "" "" > Página siguiente <a #if ($ data.pageNum == $ data.pages) discapacitado = "discapacitado" href = "javascript: void (0)" rel = "nofollow externo" rel = "nofollow" #Else pagenum = "$ data.pages" href = "javascrito: gopage ($ data.pages)" rel = "externo noOfgu" pagenum = "$ data.pages" href = "javascript: gopage ($ data.pages)" rel = "externo nofollow" #end> Última página </a> Vaya a <input id = "cambiepage" type = "text" maxpage = "10" style = "altura: 28px; line-HEight: 28px; width: 40px;"> página <a Id = "datatable" dataTn " href = "javascript: jumppage ($ data.pages);" rel = "externo nofollow" style = "margin-bottom: 5px"> confirmar </a> #end </div> <div p_sortinfo = "$! {data.orderBy}" p_isfirst = $! {data.isfirst} p_isLast = $! {data.islast} p_currentpagenum = "$! {data.pagenum}" p_totalsize = "$! {data.total}" p_endrow = "$! {data.endrow}" p_totalpagesnum = "$! {data.pages}" p_pagesize = "$! {data.pagesize}" p_startrow = "$! {data.startrow}" style = "Muestre: no"/"Divish #divish #div> </ #div.PageUtil es una clase de herramientas escrita en Velocity Toolbox, que se utiliza para imitar la lógica del número de página de paginación que muestra las barras de paginación de datos:
public class PageUtil {public static LinkedList <integer> range (Integer Len, Integer Start) {LinkedList <Integer> out = new LinkedList <> (); Final entero; if (start == null) {start = 0; final = len; } else {end = start; inicio = len; } for (int i = start; i <end; i ++) {out.add (i); } regresar; } Lista estática pública <integer> números (página entera, páginas enteras) {LinkedList <integer> números = new LinkedList <> (); Botones enteros = 7; Integer Half = Botones / 2; if (páginas <= botones) {números = rango (0, páginas); } else if (page <= half) {números = rango (0, botones-2); números.add (-1000); Numbers.Add (páginas-1); } else if (página> = páginas - 1 - mitad) {números = rango (páginas- (botones -2), páginas); números.addfirst (-1000); // poner números.addfirst (0); } else {numbers = range (página-1, página+2); números.add (-1000); Numbers.Add (páginas-1); números.addfirst (-1000); números.addfirst (0); } List <Integer> res = new ArrayList <> (); for (entero entero: números) {res.add (integer+1); } return Res; }}Y esta lógica se encuentra en el código fuente JS de DataTableable, y la convertí en el código Java. Esta parte del Código de Código fuente de DataTables es el siguiente
función _numbers (página, páginas) {var números = [], botones = extPagination.numbers_Length, half = math.floor (botones / 2), i = 1; if (páginas <= botones) {números = _Range (0, páginas); } else if (page <= half) {números = _Range (0, botones-2); números.push ('ellipsis'); números.push (páginas-1); } else if (página> = páginas - 1 - mitad) {números = _range (páginas- (botones -2), páginas); Numbers.splice (0, 0, 'ellipsis'); // no se desplaza en los números IE6.splice (0, 0, 0); } else {números = _Range (página-1, página+2); números.push ('ellipsis'); números.push (páginas-1); Numbers.splice (0, 0, 'ellipsis'); Numbers.splice (0, 0, 0); } números.dt_el = 'span'; números de devolución; } var _range = function (len, start) {var out = []; var final; if (start === Undefined) {start = 0; final = len; } else {end = start; inicio = len; } for (var i = start; i <end; i ++) {out.push (i); } regresar; };Encapsulé los datos de paginación de solicitud de AJAX de la página:
/ ** * */ // Jump de página de paginación macro Para llamar al método, la página llamada necesita proporcionar la función de método GOPAGE (redirectPage) JUMPAGE (TotalPage) {var redirectPage = $ ("#cambiepage"). Val (); if (redirectPage == "") {$ ("#ChangePage"). Focus (); } else {var rex =/^/d+$/; if (! rex.test (redirectPage)) {alerta ("El número de página se ingresa incorrectamente, solo puede ingresar un entero positivo que no es mayor que el número total de páginas"); } else {var pageno = parseInt (redirectPage); if (pageno <= 0 || pageno> totalpage) {alert ("el número de página se ingresa incorrectamente, solo enteros positivos que no son mayores que el número total de páginas"); } else {gopage (redirectPage)}}}}} $ .fn.pagenation = function (options) {// parámetros predeterminados var defaults = {url: "", data: {}, // parámetro de parámetro pageno: 1, // número de página pageSize: 10, // tamaño de página PageSucess: {} // _Self = $ (esto); opciones = $ .extend (valores predeterminados, opciones); 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, éxito: function (resultado, código, dd) {_Self.html (resultado); if (typeOf Options.pageSuccess == 'function') {options.pagesucess ();}}, error: function () {alerta (");"? ");}); }; this.init = function () {this.fndraw (1); devolver esto; } devolver esto; }Llame a la página principal:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Inserte el título aquí </title> #set ($ ctx = $ {request.getContextPath ()}) <link rel = "stylesheet" type = "text/css" href = "$ ctx/assets/js/dataTables/jQuery.datatables.min.css" rel = "nofollow externo"/> <link rel = "stylesheet" type = "text/css" href = "$ ctx/assets/js/datatables/css/jQuery.datatables_theme.cssss" n. 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> type = "text/javascript"> var pagenation = $ ("#Pagediv"). Pagenation ({url: "$ {ctx} /listdata.do", pageSize: 20, data: function (data) {$ ("#búsqueda de información [nombre]"). Cada (function (i, n) {data [$ (n) .attr ('name')]; datos; función gopage (pageno) {pagenation.fndraw (pageno); } </script> </body> </html>El parámetro PageSuccess se utiliza para algunas operaciones que deben realizarse después de que AJAX devuelve los datos con éxito.
Lo que dije aquí no está claro. La dirección GIT adjunta a la nube de código es: http://git.oschina.net/ivwpw/pagenation
No hay parte de insertar datos de la base de datos, pero solo simula los datos requeridos por la página en el controlador.
El artículo anterior de SpringMVC+Velocity, el método de paginación de actualización parcial para imitar los datos es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.