Como o plug -in de paginação usado pelo módulo anterior no projeto foi o Datatables, é muito conveniente, mas o layout na tabela de módulos recém -fabricados mudou e o plug -in Datatables não pode atendê -lo. Para unificar o estilo e não querer passar e ecoar os parâmetros de consulta na página, a solução de implementação para refrescar a página parcial é adotada.
O plano de implementação é assim: extraia a parte da tabela e use -a como parte da atualização parcial da página. O nome do arquivo é list dados.vm
<table> <Thead> <tr> <th> nome de usuário </th> <th> idade </th> </tr> </thead> <tbody> #foreach ($ dados em $! {page.list}) <tr> <td> $! {data.username} </td> <td> <t! #pagenation ($! {Page})A Pagenation é uma macro definida pela definição, usada para exibir a barra de página inferior e a barra de página. O objeto da página são os dados da página retornados pela solicitação AJAX. Cada solicitação AJAX, consulte os dados da Paged, coloque os dados no objeto ModelAndView da exibição correspondente a list-data.vm e, em seguida, retorne o objeto ModelAndView, anexe esta parte à parte em que a tabela de página principal está.
A parte macro é a seguinte:
#macro (pagenation $ dados) #if (! $ data.list.size () ou $ data.list.size () == 0) <div style = "altura: 40px; line-height: 40px; text-align: Center; font-size: 14px;"> Registe não encontrado </divi. ($ Data.List.List.S.s.s.s.s) id = "ActivityTable_info" role = "status" aria-live = "polite"> mostre $! {data.startrow} para $! {data.endrow} Resultados do item, total $! {data.total} itens </div> <id id = "paginação"> #set ($ prevpage = $ {Datapage ". $ {data.nextpage}) <a #if ($ data.pagenum == 1) desabilitado = "desativado" href = "javascript: void (0)" rel = "nofollow" externo "r =" nofollow "#else pagenum =" 1 "1" href = "jovScript: gOPage (1)" Sollow "" > Home </a> <a #if ($ data.pagenum == 1) desable = "desativado" href = "javascript: void (0)" rel = "nofollow externo" rel = "nofollow externo" #else pagenum = "$ prevpage" href = "javascript: gopage ($p)" sloiors) "ReltPage" "Reln = 25s (prevPage" ReltPage "ReltTin (prevPage" ReltTin = 230), ",", ", o", o cenário externo ", o prevpage", o: ", o", o ", o", o ", o", o ", o", o ", o que é o número de séculos, e o número de traseiros. > Página anterior </a> #set ($ temp = $ {data.pagenum} - 1) #set ($ números = $! {Pageutil.numbers ($ temp, $ data.pages)}) #ForEach ($ foo em números $) #if ($ foo = -999) <pan>… </span> #els) #if ($ foo! = $ {data.pagenum}) href = "JavaScript: Gopage ($ foo)" rel = "Nofollow externo" #end style = "margin-left: 2px;" > $ foo </a> #end #end <a #if ($ data.pagenum == $ data.pages) desativado = "desabilitado" #else pagenum = "$ nextnpage" href = "javascript: GoPage ($ nextnpage)" rel = "external nofollow" #END Style = "margin-left: 2px; > Próxima página <a #if ($ data.pagenum == $ data.pages) desabiled = "desativado" href = "javascript: void (0)" rel = "nofollow externo" rel = "Nofollow externo" #else pagenum = "$ data.pages" href = "javascript: gapage ($ data.pages)" pagenum = "$ data.pages" href = "javascript: Gopage ($ data.pages)" rel = "Nofollow externo" #END> última página </a> Vá para a <input id = "changepage" type = "text" maxpage = "10" = "altura: 28px; line-height: 28px; width": 4xpage = "10" = "". href = "javascript: jumpage ($ data.pages);" Rel = "Nofollow externo" style = "margem-bottom: 5px"> confirmar </a> #end </div> <div p_sortinfo = "$! {data.ordeby}" p_isfirst = $! {Data.isfirst} P_islT = $! {Data.islasts} p_curntpenpenumsum} "$! p_totalsize = "$! {data.total}" p_endrow = "$! {data.endrow}" p_totalpagesnum = "$! {data.pages}" p_pagesize = "$! {Data.pagesize}"} {"rystarw =" $!PageUtil é uma classe de ferramentas escrita em Velocity Toolbox, usada para imitar a lógica da página de paginação exibição de barras de paginação por dados:
classe pública PageUtil {public static LinkedList <Teger> Range (Inteiro Len, Inteiro START) {LinkedList <Teger> out = new LinkedList <> (); Final inteiro; if (start == null) {start = 0; end = len; } else {end = start; start = len; } para (int i = start; i <end; i ++) {out.add (i); } retornar; } Lista estática pública <Integer> números (página inteira, páginas inteiras) {LinkedList <Teger> números = new LinkedList <> (); Botões inteiros = 7; Inteiro metade = botões / 2; if (páginas <= botões) {números = intervalo (0, páginas); } else if (página <= half) {números = intervalo (0, botões-2); números.add (-1000); números.add (páginas-1); } else if (página> = páginas - 1 - metade) {números = range (páginas- (botões -2), páginas); números.addfirst (-1000); // coloque números.addfirst (0); } else {Numbers = range (página-1, página+2); números.add (-1000); números.add (páginas-1); números.addfirst (-1000); números.addfirst (0); } Lista <Teger> res = new ArrayList <> (); para (número inteiro inteiro: números) {res.add (número inteiro+1); } retornar res; }}E essa lógica é encontrada no código -fonte JS de Datatables, e eu a converti no código Java. Esta parte do código do código -fonte de Datatables é a seguinte
função _numbers (página, páginas) {var número = [], botões = extpagination.numbers_length, half = math.floor (botões / 2), i = 1; if (páginas <= botões) {números = _Range (0, páginas); } else if (página <= metade) {números = _Range (0, botões-2); números.push ('elipsis'); números.push (páginas-1); } else if (página> = páginas - 1 - metade) {números = _Range (páginas- (botões -2), páginas); números.splice (0, 0, 'elipsis'); // sem acabamento em IE6 números.splice (0, 0, 0); } else {números = _Range (página-1, página+2); números.push ('elipsis'); números.push (páginas-1); números.splice (0, 0, 'elipsis'); números.splice (0, 0, 0); } números.dt_el = 'span'; retornar números; } var _Range = function (len, start) {var out = []; var end; if (start === indefinido) {start = 0; end = len; } else {end = start; start = len; } para (var i = start; i <end; i ++) {out.push (i); } retornar; };Encapsulei os dados da paginação de solicitação AJAX da página:
/ ** * * */ // Página de macro Página Jump para chamar o método, a página chamada precisa fornecer o método Gopage (RedirectPage) Jumppage (totalPage) {var redirectPage = $ ("#ChangePage"). Val (); if (redirectpage == "") {$ ("#changepage"). focus (); } else {var rex =/^/d+$/; if (! rex.test (redirectpage)) {alert ("O número da página é inserido incorretamente, você só pode inserir um número inteiro positivo que não é maior que o número total de páginas"); } else {var pageno = parseint (redirectpage); if (pageno <= 0 || pageno> totalpage) {alert ("O número da página é inserido incorretamente, apenas números inteiros positivos que não são maiores que o número total de páginas"); } else {gopage (redirectpage)}}}}} $ .fn.pagenation = function (options) {// parâmetros padrão var padrão = {url: "", dados: {}, // parameter pageno: 1, // página de página Pages: 10, //} Páginas _self = $ (this); opções = $ .Extend (padrões, opções); 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! = indefinido) {ajaxdata ['pageno'] = pageno; } $ .ajax ({url: options.url, assíncrono: false, type: "post", dados: ajaxdata, sucesso: function (resultado, código, dd) {_self.html (resultado); if (typeof options.pagesUcss == 'function) {options.pagescess; }); }; this.init = function () {this.fNDraw (1); devolver isso; } retornar isso; }Ligue para a página principal:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> Insira o título aqui </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/js/datatables/css/jQuery.datatislates ="> type = "text/javascript" src = "$ ctx/Assets/js/jQuery-1.11.2.min.js"> </sCript> <script type = "text/javascript" src = "$ ctx/assets/js/macro.pagin.js"> </script> </head> type = "text/javascript"> var pagenation = $ ("#PAGEDIV"). }, PageSuccess: function () {}}). init (); função gopage (pageno) {pagenation.fndraw (pageno); } </script> </body> </html>O parâmetro PáginaCess é usado para algumas operações que precisam ser feitas após o AJAX retornar os dados com sucesso.
O que eu disse aqui não está claro. O endereço GIT anexado à nuvem de código é: http://git.oschina.net/ivwpw/pagenation
Não há parte da inserção de dados do banco de dados, mas simula apenas os dados exigidos pela página no controlador.
O artigo acima do método de paginação parcial da Springmvc+Velocity para imitar Datatables é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.