نظرًا لأن المكون الإضافي لترقيم الصفحات المستخدمة من قبل الوحدة السابقة في المشروع كان DataTables ، فهو مناسب للغاية ، ولكن تم تغيير التصميم في جدول الوحدة النمطية المصنوعة حديثًا ، ولا يمكن للمكون الإضافي DataTables تلبيته. من أجل توحيد النمط ، ولا ترغب في تمرير وتردد معلمات الاستعلام على الصفحة ، يتم اعتماد حل تنفيذ الجزئي المنعش.
خطة التنفيذ مثل هذا: استخراج جزء الجدول واستخدامه كجزء من تحديث الصفحة الجزئي. اسم الملف هو قائمة data.vm
<Table> <thead> <tr> <th> اسم المستخدم </th> <th> العمر </th> </tbor> </tbody> #foreach ($ data! {page.list}) <tr> <td> $! #pagenation ($! {page})ترقيم الماكرو محدد بواسطة التعريف ، والذي يتم استخدامه لعرض شريط الصفحة السفلي وشريط الصفحة. كائن الصفحة هو بيانات الصفحة التي يتم إرجاعها بواسطة طلب AJAX. كل طلب AJAX ، استعبر على البيانات المفرطة ، ووضع البيانات في كائن ModelAndView للعرض المقابل لـ list-data.vm ، ثم إرجاع كائن ModelAndView ، وقم بإلحاق هذا الجزء إلى الجزء الذي يوجد فيه جدول الصفحة الرئيسية.
جزء الماكرو كما يلي:
#MACRO (DATIONATION $ DATA) #if (! $ data.list.size () أو $ data.list.size () == 0) <div style = "الارتفاع: 40px ؛ خط الذروة: 40px ؛ text-align: center ؛ font-size: 14px ؛ id = "activitytable_info" rol = "status" aria-live = "pulite"> show $! {data.startrow} to $! {data.endrow} نتائج العنصر ، total $! $ {data.nextpage}) <a #if ($ data.pagenum == 1) upabled = "upabled" href = "javaScript: void (0)" rel = "severonal nofollow" rel = "external nofollow" #eles pagenum = "1" href = "javascript: gopage (1)" 2px ؛ " > الصفحة الرئيسية </a> <a #if ($ data.pagenum == 1) تعطيل = "تعطيل" href = "javaScript: void (0)" rel = "خارجي nofollow" rel = "خارجي nofloys" 2px ؛ " > الصفحة السابقة </a> #set ($ temp = $ {data.pagenum} - 1) #set ($ number = $! {pageutil.numbers ($ temp ، $ data.pages)}) #if ($ foo! = $ {data.pagenum}) href = "javaScript: gopage ($ foo)" rel = "خارجي nofollow" #end style = "margin-left: 2px ؛" > $ foo </a> #end #end <a #if ($ data.pagenum == $ data.pages) upabled = "upabled" #else pagenum = "$ nextnpage" href = "javaScript: gopage ($ nextnpage)" rel = "external nofollow" #end style = "margin-lleft: 2px ؛ > الصفحة التالية <a #if ($ data.pagenum == $ data.pages) تعطيل = "تعطيل" href = "javaScript: void (0)" rel = "خارجي nofollow" rel = "خارجي noflox" #else pagenum = "$ data.pages #else pagenum = "$ data.pages" href = "javaScript: gopage ($ data.pages)" rel = "severonal nofollow" #end> الصفحة الأخيرة </a> انتقل إلى <input id = "changepage" type = "text" maxpage = "10" style = height: 28px ؛ line-hiigh: 28px ؛ id = "datatable-btn" href = "javaScript: jumppage ($ data.pages) ؛" rel = "nofollow extreal" = "margin-bottom: 5px"> تأكيد </a> #/end </div> <div p_sortinfo = "$! {data.orderby}" p_isfirst = $! {data.isfirst} p_islast = $! p_totalsize = "$! {data.total}" p_endrow = "$! {data.endrow}" p_totalpagesnum = "$! {data.pages}" p_pagesizeize = "$!PageUtil عبارة عن فئة أدوات مكتوبة في مربع الأدوات السريعة ، والتي يتم استخدامها لتقليد منطق رقم صفحات عرض أشرطة ترحيل Datatables:
Public Class PageUtil {public static linkedlist <integer> Range (Integer Len ، Integer Start) {LinkedList <integer> out = new LinkedList <> () ؛ نهاية عدد صحيح. if (start == null) {start = 0 ؛ نهاية = لين ؛ } آخر {end = start ؛ ابدأ = لين ؛ } لـ (int i = start ؛ i <end ؛ i ++) {out.add (i) ؛ } العودة ؛ } القائمة الثابتة العامة <integer> الأرقام (صفحة الصدفة ، صفحات عدد صحيح) {LinkedList <integer> number = new LinkedList <> () ؛ أزرار عدد صحيح = 7 ؛ عدد صحيح نصف = أزرار / 2 ؛ if (pages <= buttons) {number = range (0 ، pages) ؛ } if if (page <= half) {number = range (0 ، buttons-2) ؛ أرقام. Add (-1000) ؛ الأرقام. Add (الصفحات 1) ؛ } if if (page> = pages - 1 - half) {number = range (pages- (buttons -2) ، pages) ؛ number.addfirst (-1000) ؛ // put number.addfirst (0) ؛ } آخر {الأرقام = المدى (الصفحة -1 ، الصفحة+2) ؛ أرقام. Add (-1000) ؛ الأرقام. Add (الصفحات 1) ؛ number.addfirst (-1000) ؛ number.addfirst (0) ؛ } list <integer> res = new ArrayList <> () ؛ ل (عدد صحيح عدد صحيح: الأرقام) {res.add (integer+1) ؛ } return res ؛ }}ويتم العثور على هذا المنطق في رمز مصدر JS الخاص بـ Datatables ، وقمت بتحويله إلى رمز Java. هذا الجزء من رمز مصدر Datatables هو كما يلي
الدالة _numbers (صفحة ، صفحات) {var number = [] ، buttons = extPagination.Numbers_Length ، half = math.floor (buttons / 2) ، i = 1 ؛ if (pages <= buttons) {number = _range (0 ، pages) ؛ } آخر إذا (الصفحة <= half) {number = _range (0 ، buttons-2) ؛ الأرقام. الأرقام. push (pages-1) ؛ } if if (page> = pages - 1 - half) {number = _range (pages- (buttons -2) ، pages) ؛ number.splice (0 ، 0 ، 'ellipsis') ؛ // لا يوجد unsonft في أرقام IE6.Splice (0 ، 0 ، 0) ؛ } آخر {number = _range (الصفحة -1 ، الصفحة+2) ؛ الأرقام. الأرقام. push (pages-1) ؛ number.splice (0 ، 0 ، 'ellipsis') ؛ number.splice (0 ، 0 ، 0) ؛ } number.dt_el = 'span' ؛ أرقام إرجاع ؛ } var _range = function (len ، start) {var out = [] ؛ فار. if (start === undefined) {start = 0 ؛ نهاية = لين ؛ } آخر {end = start ؛ ابدأ = لين ؛ } لـ (var i = start ؛ i <end ؛ i ++) {out.push (i) ؛ } العودة ؛ } ؛لقد قمت بتغليف بيانات ترقيم ترقيم طلب Ajax الخاصة بالصفحة:
/ ** * */ // paginal pagination صفحة قفزة للاتصال بالطريقة ، تحتاج الصفحة المسمى إلى توفير وظيفة طريقة gopage (redirectpage) jumppage (totalpage) {var redirectpage = $ ("#changepage"). val () ؛ if (redirectPage == "") {$ ("#changepage"). focus () ؛ } آخر {var rex =/^/d+$/؛ إذا (! rex.test (redirectpage)) {Alert ("يتم إدخال رقم الصفحة بشكل غير صحيح ، يمكنك فقط إدخال عدد صحيح موجب ليس أكبر من إجمالي عدد الصفحات") ؛ } آخر {var pageno = parseint (redirectpage) ؛ if (pageno <= 0 || pageno> totalpage) {Alert ("يتم إدخال رقم الصفحة بشكل غير صحيح ، فقط أعداد صحيحة موجبة ليست أكبر من العدد الإجمالي للصفحات") ؛ } آخر {gopage (redirectpage)}}}}} $. _self = $ (هذا) ؛ الخيارات = $ .extend (التخلف عن السداد ، الخيارات) ؛ var ajaxdata = {"pageno": Options.Pageno ، "pagesize": Options.pagesize} ؛ this.fndraw = function (pageno) {if (typeof (options.data) == 'function') {ajaxdata = Options.data (ajaxdata) ؛ } آخر {ajaxdata = $ .Extend (ajaxdata ، Options.Data) ؛ } if (pageno! = غير محدد) {ajaxdata ['pageno'] = pageno ؛ } $ .ajax ({url: Options.Url ، async: false ، اكتب: "post" ، البيانات: ajaxdata ، النجاح: الدالة (النتيجة ، الكود ، dd) {_self.html (result) ؛ if (typeof options.pagesucess == 'function') }) ؛ } ؛ 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/datatables/css/jquery <script type = "text/javaScript" src = "$ ctx/arcets/js/jquery -1.11.2.min.js"> </script> <script type = "text/javaScript" src = "$ ctx/arseS/js/macro.pagination.js type = "text/javaScript"> var pagenation = $ ("#pagediv"). pagenation ({url: "$ {ctx}/listdata.do" ، pagesize: 20 ، data: function (data) {$ ( البيانات ؛ وظيفة gopage (pageno) {pagenation.fndraw (pageno) ؛ } </script> </body> </html>يتم استخدام المعلمة Pagesuccess في بعض العمليات التي يجب القيام بها بعد إرجاع AJAX البيانات بنجاح.
ما قلته هنا غير واضح. عنوان GIT المرفق بسحابة الكود هو: http://git.oschina.net/ivwpw/pagenation
لا يوجد جزء من إدخال البيانات من قاعدة البيانات ، ولكنه يحاكي فقط البيانات المطلوبة من قبل الصفحة في وحدة التحكم.
المقالة أعلاه springMVC+Velocity الجزئية للتراجع في تقليد DataTables هي كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.