첫 번째 : 페이지 수를 표시하는 것은 매우 일반적이며 간단합니다.
생식 이미지 :
• 이것은 HTML 코드입니다. 매우 간단합니다 (나는 싫어하는 작은 모습을 보는 것 같습니다)
<! docType html> <html> <head lang = "en"> <meta charset = "utf-"> <script src = "js/jquery -.. href = "js/demo.css"/> <title> </title> </head> <body> <table> <thead> <tthead> <tthead> <tthead> <tr> <th> name </th> <th> gender </th> <th> numb San </td> <td> 수컷 </td> <td> </td> <td> </tr> <tr> <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> </tr> <td> eya </td> <td> 여성 </td> <td> </td> </tr> <td> </tr> </tbody> </html>
• 다음은 JS 코드입니다
$ (function () {var $ table = $ ( 'table'); // 테이블 객체 가져 오기 var var currentPage =; // 현재 페이지의 기본값을 var pagesize =; // 각 페이지에 표시된 페이지의 숫자를 설정합니다. tr '). sumpages = math.ceil (sumrows/pagesize); // 총 페이지 수를 가져옵니다 href = "#"> <span> '+(pageindex+)+'</span> </a> ') .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> <메타 http-equiv = "content-type"content = "text/html; charset = utf-"/> <title> 테이블 페이지 매김 </title pagination> </head> <syle> <style type = "text/css">. solid px #ddd;}. td {text-align : center; border : solid px #ddd; padding : px;} </style> <div> <table cellpadding = ""cellpacing = ""> <tbody id = "table"> <td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </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> </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> </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> <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> </tbody> </table> <div 스타일 = "높이 : px; 마진;"> <span id = "spanfirst"> 첫 페이지 </span> <span id = "spanpre"> previous page </span> <span id = "spannext"> 다음 페이지 </span id = "spanlast"> last </span> page/page/total </div> <spantotalpage "> spantotalpage"> 유형 = "text/javaScript"> var thetable = document.getElementById ( "table"); var totalpage = document.getElementById ( "spantotalPage"); var pagenum = document.getElementById ( "spanpagenum"); var spanpre = document.getElementById ( "spanpre"); document. spanfirst = document.getElementById ( "spanfirst"); var spanlast = document.getElementById ( "spanlast"); var numberrowsintintable = thetable.rows.length; var pagesize =; var page =; // 다음 페이지 함수 다음 () {hidetable (); currentrow = pages = pages + pagesize; forrowsintable; for (var i = currentrow; i <maxrow; i ++) {thetable.rows [i] .style.display = '';} page ++; if (maxrow == numberrowsintable) {lastText ();} showPage (); prelink (); firstLink (); {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 ();} // 첫 페이지 기능 () {hidetable (); i ++) {thetable.rows [i] .style.display = ';} showpage (); pretext (); nextLink (); lastlink ();} // 첫 페이지 함수 last () {hidetable (); page = pagecount = pagesize * (page -); for (for); {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 =; parseint (numberrowsintable/pagesize) + count;} // 링크 함수 show 링크 함수 prelink () {spanpre.innerhtml = "<a href = 'javaScript : pre (); 이전 페이지 </a>"; } function pretext () {spanpre.innerhtml = "이전 페이지"; } function nextLink () {spannext.innerhtml = "<a href = 'javaScript : next (); 다음 페이지 </a>"; } function pretext () {spanpre.innerhtml = "<a href = 'javaScript : next (); 다음 페이지 </a>"; } function nextLink () {spannext.innerhtml = "<a href = 'javaScript : next (); 다음 페이지 </a>"; } function nextText () {spannext.innerhtml = "다음 페이지"; . } function firstText () {SpanFirst.innerHtml = "첫 페이지"; } function lastLink () {spanlast.innerhtml = "<a href = 'javaScript : last ();'> 마지막 페이지 </a>"; } function lastText () {SpanLast.innerHtml = "마지막 페이지"; } // 테이블 기능 숨기기 () {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 웹 사이트를 지원해 주셔서 대단히 감사합니다!