คนแรก: เป็นเรื่องธรรมดาและง่ายมากที่จะแสดงจำนวนหน้า
ภาพการทำซ้ำ:
•นี่คือรหัส HTML มันง่ายมาก (ฉันดูเหมือนจะเห็นรูปลักษณ์เล็ก ๆ น้อย ๆ ของการไม่ชอบ)
<! doctype html> <html> <head lang = "en"> <meta charset = "utf-"> <script src = "js/jQuery -... js"> </script> <script src = "js/demo.js"> </script> href = "js/demo.css"/> <title> </title> </head> <body> <body> <tthead> <tthead> <tr> <th> ชื่อ </th> <th> เพศ </th> <th> </th> <th> San </td> <td> Male </td> <td> </td> <td> </tr> <tr> <td> tom </td> <td> ชาย </td> <td> </td> <td> </td> </tr> <td> li Si </td> <td> ชาย </td> <td> </td> <td> </td> </tr> <td> edang </td> <td> ชาย </td> <td> </td> </tr> <td> eya </td> <td> หญิง </td> <td> </td> </tr> <td> </tr> </tbody> </html>
•ต่อไปนี้คือรหัส JS
$ (function () {var $ table = $ ('ตาราง'); // รับวัตถุตาราง var currentPage =; // ตั้งค่าเริ่มต้นของหน้าปัจจุบันเป็น var pageSize =; // ตั้งจำนวนหน้าที่แสดงสำหรับแต่ละหน้า $ table.bind ('paging', function () {$ table.find tr '). hide (). slice (currentPage*pagesize, (currentPage+)*pagesize). show (); // ซ่อนแถวทั้งหมดใน tbody ก่อนแล้วแสดงข้อมูลผ่านชิ้นรวมกับจำนวนหน้าปัจจุบันและจำนวนหน้าแสดง} sumpages = math.ceil (sumrows/pagesize); // รับจำนวนทั้งหมดของหน้า var $ pager = $ ('<div> </div>'); สำหรับ (var pageindex =; pageindex <sumpages; pageindex ++) {$ ('<a href = "#"> <span> '+(pageindex+)+' </span> </a> '). -bind ("คลิก", {"newpage": pageindex}, ฟังก์ชั่น (เหตุการณ์) {currentpage = event.data ["newpage"]; แสดง}). ภาคผนวก ($ 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> การแบ่งหน้าตาราง </title> </head> <body> td {text-allign: center; border: solid px #ddd; padding: px;} </style> <dive> <table cellpadding = "" cellpacing = ""> <tbody id = "ตาราง"> <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> 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> </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> </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> 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> D> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> > </td> <td> </td> <td> </td> </tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tbody> style = "ความสูง: px; margin: px;"> <span id = "spanfirst"> หน้าแรก </span> <span id = "sprepre"> หน้าก่อนหน้า </span> <span id = "spannext"> หน้าถัดไป </spand> <span id = "spanlast"> หน้าสุดท้าย type = "text/javascript"> var thetable = document.getElementById ("ตาราง"); var totalPage = document.getElementById ("SpantoTalPage"); var pagenum = document.getElementById ( spanfirst = document.getElementById ("spanfirst"); var spanlast = document.getElementById ("spanlast"); var numberRowsIntable = thetable.rows.length; var pagesize =; var page =; // ฟังก์ชั่นหน้าถัดไป numberRoWsIntable) maxrow = numberRoWsIntable; สำหรับ (var i = currentRow; i <maxrow; i ++) {thetable.rows [i] .style.display = '';} page ++; if (maxrow == numberRowsIntable) {nextText (); ฟังก์ชันหน้า pre () {hidetable (); page-; currentRow = pageSize * หน้า; maxrow = currentRow-pageSize; ถ้า (currentRow> numberRowsIntable) currentRow = numberRoWsIntable; สำหรับ (var i = maxrow; i <currentrow; i ++) {thetable.rows [i] .style.display = '';} ถ้า (maxrow ==) {pretext (); firstText ();} showpage (); nextLink (); i <pagesize; i ++) {thetable.rows [i] .style.display = '';} showpage (); pretext (); nextLink (); lastLink (); i ++) {thetable.rows [i] .style.display = '';} showpage (); prelink (); nextText (); firstLink ();} ฟังก์ชั่น hidetable () {สำหรับ (var i =; i <numberRowsIntable; i ++) {pagenum.innerhtml = page;} // จำนวนทั้งหมดของหน้าที่ฟังก์ชัน pagecount () {var count =; if (numberRowsIntable%pagesize! =) นับ =; ส่งคืน parseInt (numberRoWsIntable/pagesize) + count;} // แสดงฟังก์ชั่นลิงก์ prelink () {sprepre.innerhtml = "<a href = 'JavaScript: pre ();'> หน้าก่อนหน้า </a>"; } function pretext () {sprepre.innerhtml = "หน้าก่อนหน้า"; } function nextLink () {spannext.innerhtml = "<a href = 'javascript: next ();'> หน้าถัดไป </a>"; } function pretext () {sprepre.innerhtml = "<a href = 'javascript: next ();'> หน้าถัดไป </a>"; } function nextLink () {spannext.innerhtml = "<a href = 'javascript: next ();'> หน้าถัดไป </a>"; } function nextText () {spannext.innerhtml = "หน้าถัดไป"; } ฟังก์ชั่น FirstLink () {spanfirst.innerhtml = "<a href = 'javascript: แรก ();'> หน้าแรก </a>"; } ฟังก์ชั่น firstText () {spanfirst.innerhtml = "หน้าแรก"; } function lastLink () {spanlast.innerhtml = "<a href = 'javascript: last ();'> หน้าสุดท้าย </a>"; } function LastText () {spanlast.innerhtml = "หน้าสุดท้าย"; } // ซ่อนฟังก์ชั่นตารางซ่อน () {สำหรับ (var i = pagesize; i <numberRowsIntable; i ++) {thetable.rows [i] .style.display = 'none';} totalPage.innerhtml = pagecount (); pagenum.innerhtml = ''; nextLink (); lastLink ();} hide (); </script> </body> </html>เนื้อหาข้างต้นคือรหัส JS ที่แนะนำโดยตัวแก้ไขเพื่อให้ตระหนักถึงผลกระทบของการเพจข้อมูลตาราง ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉัน บรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin Network!