เนื่องจากปลั๊กอินของการปนเปื้อนที่ใช้โดยโมดูลก่อนหน้านี้ในโครงการคือ DataTables จึงสะดวกมาก แต่เลย์เอาต์ในตารางโมดูลที่สร้างขึ้นใหม่มีการเปลี่ยนแปลงและปลั๊กอิน DataTables ไม่สามารถตอบสนองได้ เพื่อรวมรูปแบบและไม่ต้องการส่งผ่านและสะท้อนพารามิเตอร์การสืบค้นบนหน้าโซลูชันการใช้งานของการรีเฟรชบางส่วนจะถูกนำมาใช้
แผนการดำเนินการเป็นเช่นนี้: แยกส่วนตารางและใช้เป็นส่วนหนึ่งของการรีเฟรชบางส่วนของหน้า ชื่อไฟล์คือ list-data.vm
<table> <thead> <tr> <th> ชื่อผู้ใช้ </th> <th> อายุ </th> </tr> </thead> <tbody> #foreach ($ data ใน $! {page.list}) <td> <td> $! {data.username} </td> <td> $! #pagenation ($! {หน้า})pagenation เป็นแมโครที่กำหนดโดยนิยามซึ่งใช้เพื่อแสดงแถบหน้าด้านล่างและแถบหน้า วัตถุหน้าเป็นข้อมูลหน้าเว็บที่ส่งคืนโดยคำขอ AJAX คำขอ AJAX แต่ละครั้งสอบถามข้อมูลที่เพจใส่ข้อมูลลงในวัตถุ ModelAndView ของมุมมองที่สอดคล้องกับ list-data.vm จากนั้นส่งคืนวัตถุ ModelAndView ต่อท้ายส่วนนี้กับส่วนที่ตารางหน้าหลักคือ
ส่วนมาโครมีดังนี้:
#MACRO (pagenation $ data) #if (! $ data.list.size () หรือ $ data.list.size () == 0) <div style = "ความสูง: 40px; line-height: 40px; text-align: center; font-size: 14px; id = "ActivityTable_info" role = "สถานะ" Aria-Live = "Polite"> แสดง $! {data.startrow} ถึง $! {data.endrow} ผลลัพธ์รายการรวม $! {data.total} รายการ </div> <div id = "pagination"> #set ($ prevpage = $ $ {data.nextpage}) <a #if ($ data.pagenum == 1) ปิดใช้งาน = "ปิดใช้งาน" href = "JavaScript: void (0)" rel = "nofollow ภายนอก" rel = "external nofollow" #else pagenum = "1" href = "javascript 2px; " > home </a> <a #if ($ data.pagenum == 1) disabled = "disabled" href = "javascript: void (0)" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" #else pagenum = "$ prevpage" href = "javascript: gopage 2px; " > หน้าก่อนหน้า </a> #set ($ temp = $ {data.pagenum} - 1) #set ($ numbers = $! {pageUtil.numbers ($ temp, $ data.pages)}) #foreach ($ foo เป็น $) #if ($ foo == -999) #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) ปิดการใช้งาน = "ปิดใช้งาน" #else pagenum = "$ nextnpage" href = "JavaScript: gopage ($ nextNpage)" rel = "ภายนอก > หน้าถัดไป <a #if ($ data.pagenum == $ data.pages) disabled = "ปิดใช้งาน" href = "javascript: void (0)" rel = "nofollow ภายนอก" rel = "nofollow ภายนอก" #else pagenum = "$ data.pages" href = "javascript #ELSE PAGENUM = "$ data.Pages" href = "JavaScript: gopage ($ data.pages)" rel = "external nofollow" #end> หน้าสุดท้าย </a> ไปที่ <อินพุต ID = "ChangePage" Type = "Text" MaxPage = "10" style = "ความสูง: 28px; id = "dataTable-btn" href = "JavaScript: jumppage ($ data.pages);" rel = "external nofollow" style = "margin-bottom: 5px"> ยืนยัน </a> #end </div> <div p_sortinfo = "$! {data.orderby}" p_isfirst = $! {data.isfirst} p_islast = $! {data.islast p_totalsize = "$! {data.total}" p_endrow = "$! {data.endrow}" p_totalpagesnum = "$! {data.pages}" p_pagesize = "$! {data.pagesize}" p_startrow = "$!PageUtil เป็นคลาสเครื่องมือที่เขียนใน Velocity Toolbox ซึ่งใช้เพื่อเลียนแบบตรรกะของหมายเลขหน้าการแบ่งหน้าการแสดงของ DataTables Page Bars:
คลาสสาธารณะ PageUtil {Public Static LinkedList <Integer> ช่วง (Integer Len, Integer Start) {LinkedList <Integer> out = new LinkedList <> (); สิ้นสุดจำนวนเต็ม; if (start == null) {start = 0; สิ้นสุด = len; } else {end = start; เริ่มต้น = len; } สำหรับ (int i = start; i <end; i ++) {out.add (i); } return out; } รายการคงที่สาธารณะ <จำนวนเต็ม> ตัวเลข (หน้าจำนวนเต็ม, หน้าจำนวนเต็ม) {linkedList <integer> ตัวเลข = ใหม่ LinkedList <> (); ปุ่มจำนวนเต็ม = 7; จำนวนเต็มครึ่ง = ปุ่ม / 2; if (หน้า <= ปุ่ม) {numbers = range (0, หน้า); } อื่นถ้า (หน้า <= ครึ่ง) {ตัวเลข = ช่วง (0, ปุ่ม -2); number.add (-1000); number.add (หน้า 1); } อื่นถ้า (หน้า> = หน้า - 1 - ครึ่ง) {ตัวเลข = ช่วง (หน้า - (ปุ่ม -2), หน้า); number.addfirst (-1000); // ใส่ numbers.addfirst (0); } else {numbers = range (หน้า 1, หน้า+2); number.add (-1000); number.add (หน้า 1); number.addfirst (-1000); number.addfirst (0); } list <integer> res = new ArrayList <> (); สำหรับ (จำนวนเต็มจำนวนเต็ม: ตัวเลข) {res.add (จำนวนเต็ม+1); } return res; -และตรรกะนี้พบได้ในซอร์สโค้ด JS ของ DataTables และฉันแปลงเป็นรหัส Java ส่วนหนึ่งของรหัสแหล่งที่มาของ DataTables มีดังนี้
ฟังก์ชั่น _numbers (หน้า, หน้า) {var numbers = [], ปุ่ม = extpagination.numbers_length, half = math.floor (ปุ่ม / 2), i = 1; if (หน้า <= ปุ่ม) {numbers = _Range (0, หน้า); } อื่นถ้า (หน้า <= ครึ่ง) {numbers = _Range (0, ปุ่ม -2); number.push ('Ellipsis'); number.push (หน้า 1); } อื่นถ้า (หน้า> = หน้า - 1 - ครึ่ง) {numbers = _Range (หน้า - (ปุ่ม -2), หน้า); numbers.splice (0, 0, 'Ellipsis'); // ไม่มี unshift ใน ie6 numbers.splelice (0, 0, 0); } else {numbers = _Range (หน้า 1, หน้า+2); number.push ('Ellipsis'); number.push (หน้า 1); numbers.splice (0, 0, 'Ellipsis'); numbers.splice (0, 0, 0); } numbers.dt_el = 'span'; หมายเลขส่งคืน; - var _Range = function (len, start) {var out = []; var end; if (start === undefined) {start = 0; สิ้นสุด = len; } else {end = start; เริ่มต้น = len; } สำหรับ (var i = start; i <end; i ++) {out.push (i); } return out; -ฉันห่อหุ้มข้อมูล AJAX Request Pagination ของหน้า:
/ ** * */ // หน้าการแบ่งแยกมาโครกระโดดข้ามเพื่อเรียกใช้วิธีการที่เรียกว่าต้องให้วิธีการ gopage (redirectpage) ฟังก์ชั่น jumppage (TotalPage) {var redirectPage = $ ("#cranshecpage"). val (); if (redirectPage == "") {$ ("#changePage"). focus (); } else {var rex =/^/d+$/; if (! rex.test (redirectpage)) {แจ้งเตือน ("หมายเลขหน้าถูกป้อนไม่ถูกต้องคุณสามารถป้อนจำนวนเต็มบวกที่ไม่เกินจำนวนหน้าทั้งหมด"); } else {var pageno = parseInt (RedirectPage); if (pageno <= 0 || pageno> totalPage) {แจ้งเตือน ("หมายเลขหน้าถูกป้อนไม่ถูกต้องเฉพาะจำนวนเต็มบวกที่ไม่เกินจำนวนหน้าทั้งหมด"); } else {gopage (redirectPage)}}}}} $ .fn.pagenation = ฟังก์ชั่น (ตัวเลือก) {// พารามิเตอร์เริ่มต้น var ค่าเริ่มต้น = {url: "", ข้อมูล: {}, // พารามิเตอร์ pageno: 1, // หน้า _self = $ (นี่); ตัวเลือก = $ .Extend (ค่าเริ่มต้น, ตัวเลือก); var ajaxdata = {"pageno": opotions.pageno, "pageSize": opotions.pagesize}; this.fnDraw = function (pageno) {if (typeof (opptionss.data) == 'function') {ajaxdata = opotions.data (ajaxdata); } else {ajaxData = $ .extend (ajaxdata, opotions.data); } if (pageno! = undefined) {ajaxdata ['pageno'] = pageno; } $ .ajax ({url: opotions.url, async: false, type: "post", data: ajaxdata, ความสำเร็จ: ฟังก์ชั่น (ผลลัพธ์, รหัส, dd) {_self.html (ผลลัพธ์); if (typeof ตัวเลือก - - this.init = function () {this.fndraw (1); คืนสิ่งนี้; } ส่งคืนสิ่งนี้; -โทรในหน้าหลัก:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> แทรกชื่อที่นี่ </title> #set ($ ctx = $ {request.getContextPath ()}) <link rel = "stylesheet" type = "text/css href = "$ ctx/assets/js/datatables/jQuery.datatables.min.css" rel = "ภายนอก nofollow"/> <link rel = "stylesheet" type = "text/css" href = "$ ctx/assets/js/data <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 type = "text/javaScript"> var pagenation = $ ("#pagediv"). pagenation ({url: "$ {ctx} /listdata.do", หน้า: 20, ข้อมูล: ฟังก์ชัน (ข้อมูล) ข้อมูลส่งคืน;}, pagesuccess: function () {}}). init (); ฟังก์ชั่น gopage (pageno) {pagenation.fndraw (pageno); } </script> </body> </html>พารามิเตอร์ PageSuccess ใช้สำหรับการดำเนินการบางอย่างที่ต้องทำหลังจาก AJAX ส่งคืนข้อมูลได้สำเร็จ
สิ่งที่ฉันพูดที่นี่ไม่ชัดเจน ที่อยู่ Git ที่แนบมากับรหัสคลาวด์คือ: http://git.oschina.net/ivwpw/pagenation
ไม่มีส่วนหนึ่งของการแทรกข้อมูลจากฐานข้อมูล แต่จะจำลองข้อมูลที่กำหนดไว้ในหน้าในคอนโทรลเลอร์เท่านั้น
บทความด้านบนของ SpringMvc+Velocity วิธีการรีเฟรชการทำหน้าเว็บบางส่วนสำหรับการเลียนแบบ DataTables เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น