الأول: إنه أمر شائع جدًا وبسيط لعرض عدد الصفحات.
صورة التكاثر:
• هذا هو رمز HTML ، إنه بسيط للغاية (يبدو أنني أرى المظهر القليل من التكره)
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-"> <script src = "js/jQuery -... js"> </script> <script src = "js/demo.js href = "js/demo.css"/> <title> </title> </head> <body> <body> <thead> <tthead> <tr> <th> الاسم </th> <tbal> الجنس </th> </th> </th> العمر </th> </tr> <tbody> <tbody> <tbody> zhang San </td> <td> male </td> <td> </td> <td> </td> <td> tom </td> <td> male </td> <td> </td> <td> </td> </td> <td> li si </td> <td> male </td> <td> </td> <td> </td> </td> <td> edang </td> <td> male </td> <td> </td> </td> eya </td> <td> أنثى </td> <td> </td> </td> <td> </tbod
• ما يلي هو رمز JS
$ (function () {var $ table = $ ('table') ؛ // احصل على كائن الجدول var var currentpage = ؛ // قم بتعيين القيمة الافتراضية للصفحة الحالية إلى var pagesize = ؛ tr '). Hide (). slice (currentpage*pagesize ، (currentpage+)*pagesize) .show () ؛ // إخفاء جميع الصفوف في tbody أولاً ، ثم عرض البيانات من خلال شريحة مع العدد الحالي للصفحات وعدد الصفحات المعروضة}) sumpages = math.ceil (sumrows/pagesize) ؛ // احصل على العدد الإجمالي للصفحات var $ pager = $ ('<viv> </viv>) href = "#"> <span> '+(pageIndex+)+' </aa> ') .bind ("Click" ، {"newPage": pageIndex} ، function (event) {currentpage = event.data ["newPage"] ؛ $ table.trigger ("paging") ؛ معروض}). appendto ($ pager) ؛ $ pager.append ("") ؛} $ pager.insertafter ($ table) ؛ $ table.trigger ("paging") ؛}) ؛والثاني: قم بتنفيذ الصفحة الأمامية والصفحة الخلفية
صورة التكاثر:
• هذا هو كل الكود ، ولا يزال من السهل جدًا استخدام JS الأصلي (يبدو أن لديه حبًا لا يمكن تفسيره لـ JS الأصلي ، هل هناك أي شيء)
<! doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-"/> <title> pagination table </title> td {text-align: center ؛ الحدود: solid px #ddd ؛ padding: px ؛} </style> <div> <table cellpadding = "" cellpacing = ""> <tbody id = "table"> <tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </// td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </t d> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> <td> </td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> < td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td > </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </// td> <td> </td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> <td> < /td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> <td> <td> < بر td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </t d> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> <td> <td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td > <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> < td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <t d> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td > </td> <td> </td> <td> </td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tbody> </table> <div style = "الارتفاع: px ؛ margin: px ؛"> <span id = "spanfirst"> الصفحة الأولى </span> <span id = "spanpre"> الصفحة السابقة </span> <span id = "spannext"> الصفحة التالية </span> <span id = "spanlast"> الصفحة الأخيرة </span> صفحة </span id> type = "text/javaScript"> var thetable = document.getElementById ("table") ؛ var totalPage = document.getElementById ( spanfirst = document.getElementById ("spanfirst") ؛ var spanlast = document.getElementById ("spanlast") ؛ var numberRowsIntable = thetable.rows.length ؛ var pagesize = ؛ var page = ؛ numberRowsIntable) maxRow = numberRowsIntable ؛ for (var i = currentRow ؛ i <maxRow ؛ i ++) {thetable.rows [i] .style.display = '' ؛ ) {nextText () ؛ lastText () ؛} showpage () ؛ prelink () ؛ firstLink () ؛} // وظيفة الصفحة السابقة pre () {hidetable () ؛ page-؛ currentRow = pagesize * page ؛ maxrow = currentRow-pagesize ؛ لـ (var i = maxRow ؛ i <currentRow ؛ i ++) {thetable.rows [i] .style.display = '' ؛} if (maxRow ==) {pretext () ؛ firsttext () ؛} for ؛ i <pagesize ؛ i ++) {thetable.rows [i] .style.display = '' ؛} showpage () ؛ prelink () ؛ nextText () ؛ firstLink () ؛} function Hidetable () {for (var i = ؛ i <numberRowsIntable ؛ i ++) {thetable.rows [i] {pagenum.innerhtml = page ؛} // العدد الإجمالي للصفحات وظيفة pagecount () {var count = ؛ if (numberRowsIntable ٪ pagesize! =) count = ؛ return parseint (numberRowsIntable/pagesize) + count ؛} // show link function prelink () {spanpre.innerhtml = "<a href = 'javaScript: pre () ؛'> الصفحة السابقة </a>" ؛ } وظيفة ذريعة () {spanpre.innerhtml = "الصفحة السابقة" ؛ } الدالة nextLink () {spannext.innerhtml = "<a href = 'javaScript: next () ؛'> الصفحة التالية </a>" ؛ } وظيفة ذريعة () {spanpre.innerhtml = "<a href = 'javaScript: next () ؛'> الصفحة التالية </a>" ؛ } الدالة nextLink () {spannext.innerhtml = "<a href = 'javaScript: next () ؛'> الصفحة التالية </a>" ؛ } الدالة nextText () {spannext.innerhtml = "الصفحة التالية" ؛ } الدالة firstLink () {spanfirst.innerhtml = "<a href = 'javaScript: first () ؛'> الصفحة الأولى </a>" ؛ } Function FirstText () {spanfirst.innerhtml = "First Page" ؛ } الدالة lastLink () {spanlast.innerhtml = "<a href = 'javaScript: last () ؛'> الصفحة الأخيرة </a>" ؛ } وظيفة LastText () {spanlast.innerhtml = "الصفحة الأخيرة" ؛ }. '' ؛ nextLink () ؛ lastLink () ؛} Hide () ؛ </script> </body> </html>المحتوى أعلاه هو رمز JS الذي أدخله المحرر لتحقيق تأثير ترحيل بيانات الجدول. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، يرجى ترك رسالة لي. سوف يرد المحرر على الجميع في الوقت المناسب. شكرًا جزيلاً على دعمكم لموقع Wulin Network!