最初のもの：ページ数を表示するのは非常に一般的で簡単です。
複製画像：
•これはHTMLコードで、非常にシンプルです（嫌いになっているという小さな見た目が見えているようです）
< href = "js/demo.css"/> <title> </ittitle> </head> <body> <table> <thead> <thead> <tr> <th> name </th> <th> gender </th> <th> san </td> <td>男性</td> <td> </td> <td> </tr> <tr> <td> tom </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 = $（ 'table'）; //テーブルオブジェクトを取得var currentPage =; //現在のページのデフォルト値をvar pagesize =; //各ページの表示ページの数を設定します$ table.bind（ 'paging'、function（）{$ table.find（ 'tbody（' tbody（ 'tbod） tr '）。hide（） sumpages = math.ceil（sumrows/pagesize）; //ページの総数を取得var $ pager = $（ '<div> </div>'）; href = "＃"＃ "> <span> '+（pageindex+）+' </span> </a> '）.bind（" click "、{" newPage "：pageIndex：pageIndex}}、function（event）{current（event）{" newpage "]; $ table.trigger（" paging "）; // //表示}）2番目：フォワードページとバックページを実装します
複製画像：
•これはすべてのコードであり、ネイティブJSを使用することはまだ非常に簡単です（ネイティブJSに対する不可解な愛を持っているようです。
<！doctype html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-"/> <title>テーブルページネーション> </head> <body> <body> <style type = "text/css">。 TD {Text-Align：Center; Border：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/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> </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> </t/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> </table> <div style = "height：px; margin：px;"> <span id = "spanfirst">ファーストページ</span> <span id = "spanpre">前のページ</span> <span id = "spannext">次のページ</span> <span> <span> <span> <span> <span> <span> span> page </span>ページ/合計id = "spantotalpage"> type = "text/javascript"> var thetable = document.getElementById（ "Table"）; var totalpage = document.getElementById（ "SpantotalPage"）; var pagenum = document.getElementByid（ "spanpagenum"）; var spanpre = document.getelementbyid（ "spannext"）; var spannext "）; spanfirst = document.getElementById（ "spanfirst"）; var spanlast = document.getElementById（ "spanlast"）; var numberrowsintable = thetable.rows.length; var pagesize =; //次のページfunction next（）{）hidetable（）; culernarrow = pagesize * page = currentrow = currentrow + pagesise; ）maxrow = numberRowsIntable; pre（）{hidetable（）; page - ; currentRow = pagesize * page; maxrow = currentRow-pagesize; if（currentRow> numberRowsIntable）currentRow = numberRowsIntable; for（var i = maxrow; i <currentrow; i ++）{thetable.rows [i] .style.display = '';} if（maxrow ==）{pretext（）; firstText（）;} showpage（）; nextlink（）; lastlink（）; page = first firncaible i <pagesize; i ++）{thetable.rows [i] .style.display = '';} showpage（）; nextlink（）; lastlink（）;/ first page function last（）{hidetable（）; ）{thetable.rows [i] .style.display = '';} showpage（）; prelink（）; nexttext（）; firstlink（）;} function hidetable（）{for（var i =; i <numberRowsIntable; i ++）{theTable.rows [i] .style.display = ''; {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>"; } function pretext（）{spanpre.innerhtml = "前のページ"; } function nextlink（）{spannext.innerhtml = "<a href = 'javascript：next（）;'> nextページ</a>"; } function pretext（）{spanpre.innerhtml = "<a href = 'javascript：next（）;'> nextページ</a>"; } function nextlink（）{spannext.innerhtml = "<a href = 'javascript：next（）;'> nextページ</a>"; } function nextText（）{spannext.innerhtml = "Next Page"; } function firstLink（）{spanfirst.innerhtml = "<a href = 'javascript：first（）;'> first page </a>"; } function firstText（）{spanfirst.innerhtml = "first page"; } function lastlink（）{spanlast.innerhtml = "<a href = 'javascript：last（）;'> last page </a>"; } function lastText（）{spanlast.innerhtml = "last page"; } //テーブル関数を非表示hide（）{for（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 Webサイトへのサポートに感謝します！