Karena plugin pagination yang digunakan oleh modul sebelumnya dalam proyek adalah datatables, sangat nyaman, tetapi tata letak di tabel modul yang baru dibuat telah berubah, dan plugin data tidak dapat memenuhi itu. Untuk menyatukan gaya, dan tidak ingin melewati dan menggemakan parameter kueri pada halaman, solusi implementasi penyegaran parsial.
Rencana implementasi seperti ini: Ekstrak bagian tabel dan gunakan sebagai bagian dari halaman penyegaran parsial. Nama file adalah daftar-data.vm
<able> <Thead> <tr> <t th> nama pengguna </t> <th> use </th> </tr> </thead> <tbody> #foreach ($ data in $! {page.list}) <tr> <td> $! {data.username} </td> <td> $! {Data. #pagenation ($! {page})Pagenasi adalah makro yang ditentukan oleh definisi, yang digunakan untuk menampilkan bilah halaman bawah dan bilah halaman. Objek halaman adalah data halaman yang dikembalikan oleh permintaan AJAX. Setiap permintaan AJAX, menanyakan data paged, memasukkan data ke dalam objek ModelAndView dari tampilan yang sesuai dengan daftar-data.vm, dan kemudian mengembalikan objek ModelAndView, tambahkan bagian ini ke bagian di mana tabel halaman utama berada.
Bagian makro adalah sebagai berikut:
#macro (pagenation $ data) #if (! $ data.list.size () atau $ data.list.size () == 0) <div style = "Tinggi: 40px; garis-line-height: 40px; Text-align: center; font-size: 14px;" id = "ActivityTable_info" role = "status" aria-live = "polite"> show $! {data.StarTrow} hingga $! {data.endrow} hasil item, total $! {data.total} item </div> <div id = "pagination"> #set ($ prevpage = $ {data. ${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-kiri: 2px;" Home </a> <a #if ($ data.pagenum == 1) dinonaktifkan = "dinonaktifkan" href = "javascript: void (0)" rel = "eksternal nofollow" rel = "eksternal nofollow" #else pagenum = "$ prevpage" href = "javascript: $ gopage ($ pagenum =" $ "href =" javascript: $ gopage ($ gopage = "$" ollow " #" external ($ "prevePage ($" #"ollow ($" ollow ($ "ollow ($" style = "margin-kiri: 2px;" > Halaman Sebelumnya </a> #set ($ temp = $ {data.pagenum} - 1) #set ($ angka = $! {Pageutil.numbers ($ temp, $ data.pages)}) #foreach ($ foo di $ number) #if ($ foo == -999) <span> </span> #else <else = "foo == -999) <span> </span> #else <els #Jika ($ foo! = $ {data.pagenum}) href = "javascript: gopage ($ foo)" rel = "eksternal nofollow" #end style = "margin-left: 2px;" > $ foo </a> #end #end <a #if ($ data.pagenum == $ data.pages) dinonaktifkan = "dinonaktifkan" #else pagenum = "$ nextnpage" href = "javascript: gopage ($ nextnpage)" rel = "eksternal nofollow" #end = "margin-lefage: 2px: 2px;" External nofollow "#EnD style =" margin-lee: margin-lee: 2px; 2pex; "External nofollow" #EnD style = "margin- lee: margin-le"; > Halaman berikutnya <a #if ($ data.pagenum == $ data.pages) dinonaktifkan = "dinonaktifkan" href = "JavaScript: void (0)" rel = "eksternal nofollow" rel = "eksternal nofollow" #else pagenum = "$ data.page" href = "javascript: gopage ($ pagenum =" $ "href" href = "javascript: gopage. nofollow "#else pagenum =" $ data.pages "href =" javascript: gopage ($ data.pages) "rel =" eksternal nofollow "#end> halaman terakhir </a> Buka <input id =" changePage "type =" text "maxpage =" 10 "style =" height: 28px; line-height-height-height; "axpage =" 10 "style =" height: 28px; line-height; line-height; "axpage;" 2 28px; line-height; line-height; axpage: "2 28px; line 28p; axpage =" 10 " id = "DataTable-btn" href = "javascript: jumppage ($ data.pages);" rel = "Eksternal nofollow" style = "margin-bottom: 5px"> konfirmasi </a> #end </div> <div p_sortinfo = "$! {data.orderby}" p_isfirst = $! {data.isfirst} p_islast = $! {Data.islast} p_current "penpor =" $! {data p_totalSize = "$! {Data.total}" p_endrow = "$! {data.endrow}" p_totalpagesnum = "$! {data.pages}" p_pagesize = "$! {data.pagesize}" p_sTartrow = "$! {Data.Pageutil adalah kelas alat yang ditulis dalam kotak alat Velocity, yang digunakan untuk meniru logika tampilan nomor halaman pagination dari bilah paging data:
pageutil kelas publik {rentang public static LinkedList <Integer> (Integer len, integer start) {LinkedList <Integer> out = new LinkedList <> (); Akhir integer; if (start == null) {start = 0; end = len; } else {end = start; mulai = len; } untuk (int i = start; i <end; i ++) {out.add (i); } kembali; } Daftar statis publik <Integer> Nomor (halaman integer, halaman integer) {LinkedList <Integer> angka = new LinkedList <> (); Tombol Integer = 7; Integer setengah = tombol / 2; if (halaman <= tombol) {angka = rentang (0, halaman); } lain jika (halaman <= setengah) {angka = rentang (0, tombol-2); number.add (-1000); number.add (halaman-1); } lain jika (halaman> = halaman - 1 - setengah) {angka = rentang (halaman- (tombol -2), halaman); numbers.addfirst (-1000); // letakkan number.addfirst (0); } else {numbers = range (page-1, page+2); number.add (-1000); number.add (halaman-1); numbers.addfirst (-1000); number.addfirst (0); } Daftar <Integer> res = ArrayList baru <> (); untuk (integer integer: angka) {res.add (integer+1); } return res; }}Dan logika ini ditemukan dalam kode sumber JS dari datatables, dan saya mengubahnya menjadi kode Java. Bagian kode sumber data ini adalah sebagai berikut
fungsi _numbers (halaman, halaman) {var angka = [], tombol = extpagination.numbers_length, setengah = math.floor (tombol / 2), i = 1; if (halaman <= tombol) {angka = _range (0, halaman); } lain jika (halaman <= setengah) {angka = _range (0, tombol-2); number.push ('ellipsis'); number.push (halaman-1); } lain jika (halaman> = halaman - 1 - setengah) {angka = _range (halaman- (tombol -2), halaman); number.splice (0, 0, 'ellipsis'); // tidak ada unshift di iE6 numbers.splice (0, 0, 0); } else {numbers = _range (halaman-1, halaman+2); number.push ('ellipsis'); number.push (halaman-1); number.splice (0, 0, 'ellipsis'); number.splice (0, 0, 0); } numbers.dt_el = 'span'; nomor pengembalian; } var _range = function (len, start) {var out = []; var end; if (start === tidak terdefinisi) {start = 0; end = len; } else {end = start; mulai = len; } untuk (var i = start; i <end; i ++) {out.push (i); } kembali; };Saya merangkum data pagination permintaan AJAX halaman:
/ ** * */ // Lompatan halaman pagination makro untuk memanggil metode, halaman yang disebut perlu memberikan jumppage fungsi gopage (redirectpage) (totalpage) {var redirectpage = $ ("#changePage"). Val (); if (redirectpage == "") {$ ("#changePage"). focus (); } else {var rex =/^/d+$/; if (! rex.test (redirectpage)) {waspada ("Nomor halaman dimasukkan secara tidak benar, Anda hanya dapat memasukkan bilangan bulat positif yang tidak lebih besar dari jumlah total halaman"); } else {var pageno = parseInt (redirectpage); if (pageno <= 0 || pageno> totalpage) {alert ("Nomor halaman dimasukkan secara tidak benar, hanya bilangan bulat positif yang tidak lebih besar dari jumlah total halaman"); }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 = $ (ini); opsi = $ .Extend (default, opsi); 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! = tidak terdefinisi) {ajaxdata ['pageno'] = pageno; } $ .Ajax ({url: options.url, async: false, type: "post", data: ajaxdata, success: function (hasil, kode, dd) {_self.html (hasil); if (if opties.pagesuccess == function ') {option.pageSuccess (); }); }; this.init = function () {this.fndraw (1); kembalikan ini; } kembalikan ini; }Hubungi halaman utama:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> masukkan judul di sini </iteme> #set ($ ctx = $ {request.getContextPath ()}) <tautan rel = "stylesheet" type = "text/css" href = "$ ctx/aset/js/datatables/jQuery.datatables.min.css" rel = "eksternal nofollow"/> <tautan rel = "stylesheet" type = "text/css" href = "$ ctx/aset/js/databables/css/jQuery" over over. <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"). pagenation ({url: "$ {ctx} /listData.do", pageSize: 20, data: function (data) {$ ("#name). pengembalian data;}, halaman: fungsi () {}}). init (); fungsi gopage (pageno) {pagenation.fndraw (pageno); } </script> </body> </html>Parameter PageSuccess digunakan untuk beberapa operasi yang perlu dilakukan setelah AJAX mengembalikan data dengan sukses.
Apa yang saya katakan di sini tidak jelas. Alamat GIT yang dilampirkan pada cloud kode adalah: http://git.oschina.net/ivwpw/pagenation
Tidak ada bagian dari memasukkan data dari database, tetapi hanya mensimulasikan data yang diperlukan oleh halaman di pengontrol.
Artikel di atas Metode Pagination Parsial Refresh SpringMVC+Velocity untuk meniru semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.