Yang pertama: Sangat umum dan sederhana untuk menampilkan jumlah halaman.
Gambar reproduksi:
• Ini adalah kode HTML, sangat sederhana (sepertinya saya melihat sedikit tampilan yang tidak disukai)
<! Doctype html> <html> <head lang = "en"> <meta charset = "utf-"> <script src = "js/jQuery -... js"> </script> <script src = "js/demo.js"> </skrip> <tautan rel = "stirle" href = "js/demo.css"/> <itement> </itement> </head> <body> <ablew> <Thead> <tthead> <tr> <t th> </t th> <t th> gender </t> <tmBody </th> <tr> </th> </tr> </thead> <tbody> <t tr> <tt San </td> <td> pria </td> <td> </td> <td> </tr> <tr> <td> tom </td> <td> pria </td> <td> </td> <td> </td> </tr> <td> Li SI </td> <td> pria </td> <td> </td> <td> </td> </tr> <td> edang </td> <td> pria </td> <td> </td> </tr> <td> Eya </td> <td> wanita </td> <td> </td> </tr> <td> </tr> </tbody> </html>
• Berikut ini adalah kode JS
$ (function () {var $ table = $ ('tabel'); // Dapatkan objek tabel var currentpage =; // Atur nilai default halaman saat ini ke var halaman =; // atur jumlah halaman yang ditampilkan untuk setiap halaman $ tabel.bind ('paging', function () {$ tabel.find ('tbody tbody $ tr '). Sembunyikan (). Slice (currentpage*halaman, (currentpage+)*halaman) .show (); // Sembunyikan semua baris di tbody terlebih dahulu, dan kemudian menampilkan data melalui irisan dikombinasikan dengan jumlah halaman saat ini dan jumlah halaman yang ditampilkan}); var sumrows = $ tabel.find (' tbody tr '). Sumpages = Math.Ceil (Sumrows/PageSize); // Dapatkan jumlah total halaman var $ pager = $ ('<div> </div>'); for (var pageIndex =; pageIndex <Sumpages; pageIndex ++) {$ ('<a href = "#"> <span> '+(pageIndex+)+' </span> </a> ') .bind ("klik", {"newPage": pageIndex}, function (event) {currentPage = event.data ["newPage"]; $ tabel.trigger ("paging"); // tambahkan a trigger ke setiap page. ditampilkan}). appendTo ($ pager); $ pager.append ("");} $ pager.insertafter ($ table); $ table.trigger ("paging");});Yang kedua: Menerapkan halaman maju dan halaman belakang
Gambar reproduksi:
• Ini semua kode, dan masih sangat mudah untuk menggunakan JS asli (tampaknya memiliki cinta yang tidak dapat dijelaskan untuk JS asli, apakah ada)
<! Doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-"/> <Title> pagination tabel </iteme> </adephign> <body> <style type = "text/css"> tabel tabel {border> </head; px #ddd; padding: px;} </style> <v> <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> <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> </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> </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> </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> <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> </tr> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tbody> </able> <Div style = "Height: px; margin: px;"> <span id = "spanfirst"> halaman pertama </span> <span id = "spanpre"> halaman sebelumnya </span> <span id = "spannext"> halaman berikutnya </span> <span = "spanlast"> halaman terakhir </span> halaman </span> span/span </span> </span> </span/spanpage </span/span </span> page </span> </span> </span/span = "SPANT/SPANT/SPANT/PAGE </span> PAGE </span> PAGE </span> type = "Text/JavaScript"> var thetable = document.geteLementById ("Table"); var totalpage = document.getElementById ("spantotalpage"); var pagenum = document.geteLementById ("spanpagenum"); var spanpre = document.getElementByid ("spanprext"); vARPANNEXT = DOCUMENTGY. spanfirst = document.geteLementById ("spanfirst"); var spanlast = document.geteLementById ("spanlast"); var numberrowsintable = thetable.rows.length; var pageSize =; var page =; // function halaman berikutnya = {hideTable (); currentrow = lancar = halamanzeze * halaman * nexter = nextrow = hideTable (); currentrow = lancar = halamanzeze * halaman * nextrower = geser = hideTable (); Currentrow = Preageze * halaman * halaman; numberRowsIndable; for (var i = currentRow; i <maxrow; i ++) {thetable.rows [i] .style.display = '';} page ++; if (maxrow == numberRowsIntable) {nextText (); lastText ();} showpage (); prelink (); firstLink (); lastText ();} showpage (); prelink (); firstlink (); function lastText ();} function (); prelink (); firstLink (); function lastText ();} function (); prelink (); firstLink (); function fungsi ();};};}; {hidetable (); halaman-; currentRow = pageSize * page; maxrow = currentRow-pagesize; if (currentRow> numberRowsIntable) currentRow = numberRowsIntable; untuk (var i = maxrow; i <currentrow; i ++) {thetable.rows [i] .style.display = '';} if (maxrow ==) {pretext (); firstText ();} page for pertama (); page = (); for; for; for; for; for; for; for; for; for; for lastLink (); for; for; for; for lastLink (); for lastLink (); i ++) {thetable.rows [i] .style.display = '';} showPage (); detur (); nextLink (); lastLink ();} // fungsi halaman pertama terakhir () {hidetable (); page = pageCount (); currentrow = fageSize * (halaman - for); for); {thetable.rows [i] .style.display = '';} showPage (); prelink (); nextText (); firstLink ();} function hidetable () {for (var i =; i <numberRowsIntable; i ++) {thetable.rows [i]. {pagenum.innerHtml = page;} // Jumlah total halaman fungsi pagecount () {var count =; if (numberRowsIntable%halamanze! =) count =; return parseInt (numberRowsIntable/pagesize) + count;} // tunjukkan fungsi tautan prelink () {spanpre.innerHtml = "<a href = 'javascript: pre ();'> halaman sebelumnya </a>"; } function inetext () {spanpre.innerHtml = "halaman sebelumnya"; } function nextLink () {spannext.innerHtml = "<a href = 'javascript: next ();'> halaman berikutnya </a>"; } function inetext () {spanpre.innerHtml = "<a href = 'javascript: next ();'> halaman berikutnya </a>"; } function nextLink () {spannext.innerHtml = "<a href = 'javascript: next ();'> halaman berikutnya </a>"; } function nextText () {spannext.innerHtml = "halaman berikutnya"; } function firstLink () {spanfirst.innerHtml = "<a href = 'javascript: first ();'> halaman pertama </a>"; } function firstText () {spanfirst.innerHtml = "halaman pertama"; } function lastLink () {spanlast.innerHtml = "<a href = 'javascript: last ();'> halaman terakhir </a>"; } function lastText () {spanlast.innerHtml = "halaman terakhir"; } // Sembunyikan fungsi tabel hide () {for (var i = pageSize; i <numberRowsIndable; i ++) {thetable.rows [i] .style.display = 'none';} totalpage.innerhtml = pagecount (); pagenum.innerhtml = = pagecount (); pagenum.innerhtml = = pageCount (); pagenum.innerhtml = = ''; nextLink (); lastLink ();} hide (); </cript> </body> </html>Konten di atas adalah kode JS yang diperkenalkan oleh editor untuk mewujudkan efek paging data tabel. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan. Editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin Network!