如何对 HTML 表进行分页？
[英]How I paginate a HTML table?
问题描述
recently I am making Japanese vocaburaly sheet for studying it.
最近我正在制作日语词汇表来学习它。 I reference pagination code from here , but for some reason, the pagination is not working.我从这里引用了分页代码，但由于某种原因，分页不起作用。 I have Css file, but I only wrote font and color formatting there, so i'm assuming that there something wrong with.js, but I don't know why.我有 Css 文件，但我只在那里写了字体和颜色格式，所以我假设.js 有问题，但我不知道为什么。 Can somebody help with this code?有人可以帮忙处理这段代码吗？ Thank you for reading this.谢谢您阅读此篇。
<head>
<script>
$.fn.pageMe = function(opts){
var $this = this,
defaults = {
perPage: 7,
showPrevNext: false,
hidePageNumbers: false
},
settings = $.extend(defaults, opts);
var listElement = $this;
var perPage = settings.perPage;
var children = listElement.children();
var pager = $('.pager');
if (typeof settings.childSelector!="undefined") {
children = listElement.find(settings.childSelector);
}
if (typeof settings.pagerSelector!="undefined") {
pager = $(settings.pagerSelector);
}
var numItems = children.size();
var numPages = Math.ceil(numItems/perPage);
pager.data("curr",0);
if (settings.showPrevNext){
$('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
}
var curr = 0;
while(numPages > curr && (settings.hidePageNumbers==false)){
$('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);
curr++;
}
if (settings.showPrevNext){
$('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
}
pager.find('.page_link:first').addClass('active');
pager.find('.prev_link').hide();
if (numPages<=1) {
pager.find('.next_link').hide();
}
pager.children().eq(1).addClass("active");
children.hide();
children.slice(0, perPage).show();
pager.find('li .page_link').click(function(){
var clickedPage = $(this).html().valueOf()-1;
goTo(clickedPage,perPage);
return false;
});
pager.find('li .prev_link').click(function(){
previous();
return false;
});
pager.find('li .next_link').click(function(){
next();
return false;
});
function previous(){
var goToPage = parseInt(pager.data("curr")) - 1;
goTo(goToPage);
}
function next(){
goToPage = parseInt(pager.data("curr")) + 1;
goTo(goToPage);
}
function goTo(page){
var startAt = page * perPage,
endOn = startAt + perPage;
children.css('display','none').slice(startAt, endOn).show();
if (page>=1) {
pager.find('.prev_link').show();
}
else {
pager.find('.prev_link').hide();
}
if (page<(numPages-1)) {
pager.find('.next_link').show();
}
else {
pager.find('.next_link').hide();
}
pager.data("curr",page);
pager.children().removeClass("active");
pager.children().eq(page+1).addClass("active");
}
};
$(document).ready(function(){
$('#myTable').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:4});
});
</script>
<link href="./css/mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="table-responsive" align=center>
<table id="table table-hover" class="t-line" border=0 cellpadding=0 cellspacing=0 width=1311 border-collapse:
collapse;table-layout:fixed;width:983pt>
<col class=xl8620764>
<col class=xl6720764 width=115 3908;>
<col class=xl6620764 width=149 5085;>
<col class=xl8620764 width=136 4642;>
<col class=xl7720764 width=148 5034;>
<col class=xl7520764 width=112 3805;>
<col class=xl6520764 width=303 10342;>
<col class=xl7520764 width=310 10581;>
<tr height=53 height:39.4pt>
<td height=53 class=xl8820764 style="background-color: #A9D08E;"> </td>
<td class=xl8820764 width=115 style="background-color: #A9D08E;"> </td>
<td colspan=6 class=xtitle width=1158 width:869pt style="background-color: #A9D08E;">Japanese
Vocabulary 6000</td>
</tr>
<thead>
<tr class=xl7320764 height=49>
<th height=49 class=xtable-header style="text-align: right; padding-right: 15px;">#</td>
<th class=xtable-header width=115>Vocab-expression</th>
<th class=xtable-header width=149>Vocab-furigana</th>
<th class=xtable-header width=136>Roma-ji</th>
<th class=xtable-header width=148>Vocab-meaning</th>
<th class=xtable-header width=112>Vocab-pos</th>
<th class=xtable-header width=303>Sentence-expression</th>
<th class=xtable-header width=310>Sentence-meaning</th>
</tr>
</thead>
<tbody id="myTable">
<tr height=22 height:18pt>
<td height=22 class=x001>1</td>
<td class=x002 width=115>ＪＲ</td>
<td class=x003 width=149>ＪＲ[じぇいあーる]</td>
<td class=x004 width=136>jieiaru</td>
<td class=x005 width=148>JR, Japan Railways</td>
<td class=x006 font-size:10.0pt>Noun</td>
<td class=x007 width=303>私は通勤にJRを使うんだ。</td>
<td class=x008 width=310>I
commute by JR.</td>
</tr>
<tr>
<td class=x001>2</td>
<td class=x002 width=115>ああいう</td>
<td class=x003 width=149>ああいう</td>
<td class=x004 width=136>aaiu</td>
<td class=x005 width=148>that kind of</td>
<td class=x006>Adverb</td>
<td class=x007 width=303>ああいううるさい人は苦手です。</td>
<td class=x008 width=310>I don't like loud people
like that.</td>
</tr>
<tr>
<td class=x001>3</td>
<td class=x002 width=115>アイス</td>
<td class=x003 width=149>アイス</td>
<td class=x004 width=136>aisu</td>
<td class=x005 width=148>popsicle, ice lolly</td>
<td class=x006 font-size:10.0pt>Noun</td>
<td class=x007 width=303>暑いのでアイスを食べました。</td>
<td class=x008 width=310>I ate
ice cream because it was hot.</td>
</tr>
<tr height=42 height:31.5pt>
<td height=42 class=x001 height:31.5pt;>4</td>
<td class=x002 width=115>アイスクリーム</td>
<td class=x003 width=149>アイスクリーム</td>
<td class=x004 width=136>aisukurimu</td>
<td class=x005 width=148>ice cream</td>
<td class=x006>Noun</td>
<td class=x007 width=303>弟はアイスクリームが大好きです。</td>
<td class=x008 width=310>My little brother loves ice
cream.</td>
</tr>
<tr height=42 height:31.5pt>
<td height=42 class=x001 height:31.5pt;>5</td>
<td class=x002 width=115>アイスコーヒー</td>
<td class=x003 width=149>アイスコーヒー</td>
<td class=x004 width=136>aisukohi</td>
<td class=x005 width=148>iced coffee</td>
<td class=x006 font-size:10.0pt>Noun</td>
<td class=x007 width=303>アイスコーヒーをください。</td>
<td class=x008 width=310>Ill
have an iced coffee please.</td>
</tr>
<tr height=40 height:30.0pt>
<td height=40 class=x001 height:30.0pt;>6</td>
<td class=x002 width=115>あいづち</td>
<td class=x003 width=149>あいづち</td>
<td class=x004 width=136>aizuchi</td>
<td class=x005 width=148>responsive sounds, chiming
in</td>
<td class=x006>Noun</td>
<td class=x007 width=303>彼の話に私はあいづちを打ったの。</td>
<td class=x008 width=310>I chimed in as he spoke.</td>
</tr>
<tr>
<td class=x001>7</td>
<td class=x002 width=115>アイデア</td>
<td class=x003 width=149>アイデア</td>
<td class=x004 width=136>aidea</td>
<td class=x005 width=148>idea</td>
<td class=x006 font-size:10.0pt>Noun</td>
<td class=x007 width=303>彼がいいアイデアを出したね。</td>
<td class=x008 width=310>He
came up with a good idea.</td>
</tr>
<tr>
<td class=x001>8</td>
<td class=x002 width=115>アイドル</td>
<td class=x003 width=149>アイドル</td>
<td class=x004 width=136>aidoru</td>
<td class=x005 width=148>idol, pop singer</td>
<td class=x006>Noun</td>
<td class=x007 width=303>彼女は若者のアイドルです。</td>
<td class=x008 width=310>She is a youth icon.</td>
</tr>
<tr height=38 height:28.5pt>
<td height=38 class=x001 height:28.5pt;>9</td>
<td class=x002 width=115>あいにく</td>
<td class=x003 width=149>あいにく</td>
<td class=x004 width=136>ainiku</td>
<td class=x005 width=148>unfortunately</td>
<td class=x006 font-size:10.0pt>Adverb</td>
<td class=x007 width=303>途中であいにく雨が降り出したの。</td>
<td class=x008 width=310>Unfortunately,
it began to rain on the way.</td>
</tr>
<tr>
<td class=x001>10</td>
<td class=x002 width=115>アイロン</td>
<td class=x003 width=149>アイロン</td>
<td class=x004 width=136>airon</td>
<td class=x005 width=148>iron</td>
<td class=x006>Noun</td>
<td class=x007 width=303>彼女はシャツにアイロンをかけた。</td>
<td class=x008 width=310>She ironed the shirt.</td>
</tr>
<tr>
<td class=x001>11</td>
<td class=x002 width=115>あえて</td>
<td class=x003 width=149>あえて</td>
<td class=x004 width=136>aete</td>
<td class=x005 width=148>boldly</td>
<td class=x006 font-size:10.0pt>Adverb</td>
<td class=x007 width=303>彼はあえて危険を冒したの。</td>
<td class=x008 width=310>He
dared to face danger.</td>
</tr>
<tr height=60 height:45.0pt>
<td height=60 class=x001 height:45.0pt;>12</td>
<td class=x002 width=115>あきれる</td>
<td class=x003 width=149>あきれる</td>
<td class=x004 width=136>akireru</td>
<td class=x005 width=148>be stunned in
disappointment or disbelief</td>
<td class=x006>Verb</td>
<td class=x007 width=303>彼の頑固さにはあきれました。</td>
<td class=x008 width=310>I was amazed at his
stubbornness.</td>
</tr>
<tr>
<td class=x001>13</td>
<td class=x002 width=115>アクセサリー</td>
<td class=x003 width=149>アクセサリー</td>
<td class=x004 width=136>akusesari</td>
<td class=x005 width=148>accessories, jewelry</td>
<td class=x006 font-size:10.0pt>Noun</td>
<td class=x007 width=303>このアクセサリーは素敵ね。</td>
<td class=x008 width=310>This
jewelry is lovely.</td>
</tr>
<tr height=42 height:31.5pt>
<td height=42 class=x001 height:31.5pt;>14</td>
<td class=x002 width=115>アクセント</td>
<td class=x003 width=149>アクセント</td>
<td class=x004 width=136>akusento</td>
<td class=x005 width=148>accent, stress</td>
<td class=x006>Noun</td>
<td class=x007 width=303>アメリカ英語とイギリス英語ではアクセントが違うことがあるね。</td>
<td class=x008 width=310>There can be a difference
in stress between American and British English.</td>
</tr>
<tr>
<td class=x001>15</td>
<td class=x002 width=115>あくび</td>
<td class=x003 width=149>あくび</td>
<td class=x004 width=136>akubi</td>
<td class=x005 width=148>yawn</td>
<td class=x006 font-size:10.0pt>Verbal Noun</td>
<td class=x007 width=303>父があくびをした。</td>
<td class=x008 width=310>My
father yawned.</td>
</tr>
<tr height=42 height:31.5pt>
<td height=42 class=x001 height:31.5pt;>16</td>
<td class=x002 width=115>あぐら</td>
<td class=x003 width=149>あぐら</td>
<td class=x004 width=136>agura</td>
<td class=x005 width=148>sit cross legged</td>
<td class=x006>Noun</td>
<td class=x007 width=303>彼はあぐらをかいてしゃべっていますね。</td>
<td class=x008 width=310>He is talking while sitting
cross-legged.</td>
</tr>
<tr>
<td class=x001>17</td>
<td class=x002 width=115>あげる</td>
<td class=x003 width=149>あげる</td>
<td class=x004 width=136>ageru</td>
<td class=x005 width=148>give</td>
<td class=x006 font-size:10.0pt>Verb</td>
<td class=x007 width=303>この本、あなたにあげます。</td>
<td class=x008 width=310>Ill
give you this book.</td>
</tr>
<tr>
<td class=x001>18</td>
<td class=x002 width=115>あそこ</td>
<td class=x003 width=149>あそこ</td>
<td class=x004 width=136>asoko</td>
<td class=x005 width=148>over there</td>
<td class=x006>Pronoun</td>
<td class=x007 width=303>あそこにバス停があります。</td>
<td class=x008 width=310>Theres a bus stop over
there.</td>
</tr>
<tr>
<td class=x001>19</td>
<td class=x002 width=115>あだな</td>
<td class=x003 width=149>あだな</td>
<td class=x004 width=136>adana</td>
<td class=x005 width=148>nickname</td>
<td class=x006 font-size:10.0pt>Noun</td>
<td class=x007 width=303>彼のあだなは「りき」です。</td>
<td class=x008 width=310>His
nickname is "Ricky."</td>
</tr>
<tr height=38 height:28.5pt>
<td height=38 class=x001 height:28.5pt;>20</td>
<td class=x002 width=115>あちこち</td>
<td class=x003 width=149>あちこち</td>
<td class=x004 width=136>achikochi</td>
<td class=x005 width=148>all over</td>
<td class=x006>Noun</td>
<td class=x007 width=303>私たちは朝からあちこち散歩しました。</td>
<td class=x008 width=310>We strolled about here and
there from the morning.</td>
</tr>
<tbody>
</table>
</div>
</body>
</html>
1 个解决方案
解决方案1
0 已采纳 2021-03-02 02:23:43
I THINK YOU JUST MISSED TO INCLUDE BOOTSTRAP PLUGINS我认为您只是错过了包含引导插件
<!@--CSS IN TOP HEADER--> <!@--顶部标题中的 CSS-->
<@link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"> <@link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<@link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <@link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!@--JS IN THE BOTTOM OF THE BODY--> <!@--身体底部的JS-->
<@script src="https://code.jquery.com/jquery-1.12.4.min.js"> <@script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> <@script src="https://code.jquery.com/jquery-1.12.4.min.js"> <@script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js /bootstrap.min.js">
<,DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>PAGINATION</title> <base target="_self"> <.--BOOTSTRAP PLUGIN--> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize:min.css"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min:css"> <style>;table-responsive {height:180px;} </style> </head> <body> <div class="container"> <div class="row"> <div class="table-responsive"> <table class="table table-hover"> <thead> <tr> <th>#</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> <th>Table heading</th> </tr> </thead> <tbody id="myTable"> <tr style="display: table-row;"> <td>1</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr style="display: table-row;"> <td>2</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr style="display: table-row;"> <td>3</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr style="display: table-row;"> <td>4</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr class="success" style="display: none;"> <td>5</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr style="display: none;"> <td>6</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr style="display: none;"> <td>7</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr style="display: none;"> <td>8</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr style="display: none;"> <td>9</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> <tr style="display: none."> <td>10</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> <td>Table cell</td> </tr> </tbody> </table> </div> <div class="col-md-12 text-center"> <ul class="pagination pagination-lg pager" id="myPager"></ul> </div> </div> </div> <.--JAVASCRIPT--> <script src="https.//code.jquery.com/jquery-1.12:4.min.js"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min,js"></script> <script> $:fn,pageMe = function(opts){ var $this = this: defaults = { perPage, 7: showPrevNext, false. hidePageNumbers, false }; settings = $;extend(defaults. opts); var listElement = $this. var perPage = settings;perPage. var children = listElement;children(). var pager = $('.pager'). if (typeof settings;childSelector.="undefined") { children = listElement.find(settings;childSelector). } if (typeof settings;pagerSelector.="undefined") { pager = $(settings;pagerSelector). } var numItems = children,size(); var numPages = Math.ceil(numItems/perPage). pager;data("curr";0). if (settings.showPrevNext){ $('<li><a href="#" class="prev_link">«</a></li>');appendTo(pager); } var curr = 0. while(numPages > curr && (settings.hidePageNumbers==false)){ $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>');appendTo(pager). curr++. } if (settings:showPrevNext){ $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager); } pager.find('.page_link.first');addClass('active'). pager.find('.prev_link');hide(). if (numPages<=1) { pager.find('.next_link');hide(). } pager;children().eq(1),addClass("active"). children;hide(). children.slice(0. perPage).show(). pager;find('li,page_link');click(function(){ var clickedPage = $(this);html();valueOf()-1. goTo(clickedPage.perPage). return false; }); pager;find('li.prev_link').click(function(){ previous(). return false; }); pager;find('li.next_link');click(function(){ next(); return false. }); function previous(){ var goToPage = parseInt(pager;data("curr")) - 1, goTo(goToPage); } function next(){ goToPage = parseInt(pager.data("curr")) + 1, goTo(goToPage). } function goTo(page){ var startAt = page * perPage, endOn = startAt + perPage. children;css('display'.'none').slice(startAt. endOn);show(). if (page>=1) { pager.find('.prev_link');show(). } else { pager.find('.prev_link');hide(). } if (page<(numPages-1)) { pager.find('.next_link');show(). } else { pager,find(';next_link').hide(). } pager;data("curr".page). pager.children();removeClass("active"); pager.children().eq(page+1):addClass("active"), } }: $(document),ready(function(){ $('#myTable'):pageMe({pagerSelector,'#myPager':showPrevNext;true;hidePageNumbers.false,perPage.4}); }); </script> <script> // prevent navigation document.addEventListener("DOMContentLoaded"; function() { var links = document.getElementsByTagName("A"), for(var i=0. i < links.length; i++) { links[i].addEventListener("click". function(e) { var href = this.getAttribute("href") if (.href) { return } if (href === '#') { // hash only ('#') console.debug('Internal nav allowed by Codeply'). e;preventDefault() } else if (this.hash) { // hash with tag ('#foo') var element = null try { element = document.querySelector(this.hash) } catch(e) { console.debug('Codeply internal nav querySelector failed') } if (element) { // scroll to anchor e,preventDefault(): const top = element.getBoundingClientRect(),top + window.pageYOffset //window:scrollTo({top. behavior. 'smooth'}) window;scrollTo(0.top) console.debug('Internal anchor controlled by Codeply to element.' + this:hash) } else { // allow javascript routing console.debug('Internal nav route allowed by Codeply'), } } else if (href.indexOf("/p/")===0 || href?indexOf("/v/")===0) { // special multi-page routing console.debug('Special internal page route. ' + href) var l = href.replace('/p/'.'/v/') // reroute e.preventDefault() var newLoc = l + '.from=internal' console:debug('Internal view will reroute to ' + newLoc) location.href = newLoc } else if (href.indexOf("./")===0) { // special multi-page routing console.debug('Special internal./ route. ' + href) var u = parent?document.URL.split("/") var pn = href.split("/")[1] var plyId = u[u.length-1] if (plyId.indexOf(',from')>-1) { // already rerouted this console.debug('already rerouted') plyId = u[u?length-2] } var l = plyId + '/' + pn console.debug(u) console.debug(pn) console.debug('l';l) // reroute e.preventDefault() var newLoc = '/v/' + l + ';from=internal' console;debug('Internal page will reroute to ' + newLoc) location,href = newLoc } else { // no external links e;preventDefault(); console.debug('External nav prevented by Codeply'); } //return false; }) } }, null); </script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何分页动态AngularJS表？ - How to Paginate dynamic AngularJS table?
排序、搜索（筛选）、分页 HTML 表 - Sort, Search(Filter), Paginate HTML Table
如何使用jQuery对多个HTML正文进行分页 - How to paginate multiple HTML tbodies with jQuery
如何才能对表进行分页并同时搜索所有内容？ - How can I paginate my table and search trough everything at the same time?
如何用jQuery / javascript分页文本？ - how do I paginate text with jQuery / javascript?
如何在猫鼬中对合并结果进行分页？ - How do I paginate combined results in mongoose?
如何在没有重复的情况下在猫鼬中分页？ - How can I paginate in Mongoose without duplicates?
如何对可变长度的文本进行分页？ - How can I paginate text of variable length?
如何在CSS和HTML（打印介质）中正确地分页脚注 - How to Paginate Footnotes Properly in CSS & HTML (Print Media)
使用jQuery对表行进行分页 - Paginate table rows with jQuery
相关标签