Javascript “如何整合”；“每页项目数”；及；分页“；
我已经编写了以下代码。其思想是将选定的“每页报告”值传递到javascript分页函数中，以相应地显示页面 问题：值似乎传递正确，但页面显示不正确。例如，“每页报告”的值=2。但不是每页显示2份报告，而是在每次单击“下一步”或从第1页移动到第2页时显示所有/全部报告，并扣除2份报告，以此类推 有人能告诉我我的代码有什么问题吗？谢谢Javascript “如何整合”；“每页项目数”；及；分页“；,javascript,html,pagination,Javascript,Html,Pagination,我已经编写了以下代码。其思想是将选定的“每页报告”值传递到javascript分页函数中，以相应地显示页面 问题：值似乎传递正确，但页面显示不正确。例如，“每页报告”的值=2。但不是每页显示2份报告，而是在每次单击“下一步”或从第1页移动到第2页时显示所有/全部报告，并扣除2份报告，以此类推 有人能告诉我我的代码有什么问题吗？谢谢 <table> <tr> <td><label id="lDisplayPe
<table>
<tr>
<td><label id="lDisplayPerPg" for="lDisplayPerPg">Reports per page</label>
<select name="listDisplayPerPg" id="listDisplayPerPg">
<option value="2" selected="selected">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
</select></td>
</tr>
</table>
<form method="post" action="">
<table id="tadminViewReport" border="0" width="960px" cellpadding="0" cellspacing="0">
<tr>
<th width="15%">Username</th>
<th width="15%">Report ID</th>
<th width="40%">Report Title</th>
<th width="20%">Date submitted</th>
<th width="10%">Status</th>
</tr>
<tr>
<td>username1</td>
<td>reportID1</td>
<td class="reportDoc">Document 1</td>
<td>Date 1</td>
<td><a href="admin_report_details.html">Received</a></td>
</tr>
<tr>
<td>username2</td>
<td>reportID2</td>
<td class="reportDoc">Document 2</td>
<td>Date 2</td>
<td><a href="admin_report_details.html">In Queue</a></td>
</tr>
<tr>
<td>username3</td>
<td>reportID3</td>
<td class="reportDoc">Document 3</td>
<td>Date 3</td>
<td><a href="admin_report_details.html">Completed</a></td>
</tr>
<tr>
<td>username4</td>
<td>reportID4</td>
<td class="reportDoc">Document 4</td>
<td>Date 4</td>
<td><a href="admin_report_details.html">In Queue</a></td>
</tr>
<tr>
<td>username5</td>
<td>reportID5</td>
<td class="reportDoc">Document 5</td>
<td>Date 5</td>
<td><a href="admin_report_details.html">In Queue</a></td>
</tr>
<tr>
<td>username6</td>
<td>reportID6</td>
<td class="reportDoc">Document 6</td>
<td>Date 6</td>
<td><a href="admin_report_details.html">Completed</a></td>
</tr>
<tr>
<td>username7</td>
<td>reportID7</td>
<td class="reportDoc">Document 7</td>
<td>Date 7</td>
<td><a href="admin_report_details.html">Completed</a></td>
</tr>
<tr>
<td>username8</td>
<td>reportID8</td>
<td class="reportDoc">Document 8</td>
<td>Date 8</td>
<td><a href="admin_report_details.html">Received</a></td>
</tr>
<tr>
<td>username9</td>
<td>reportID9</td>
<td class="reportDoc">Document 9</td>
<td>Date 9</td>
<td><a href="admin_report_details.html">Received</a></td>
</tr>
<tr>
<td>username10</td>
<td>reportID10</td>
<td class="reportDoc">Document 10</td>
<td>Date 10</td>
<td><a href="admin_report_details.html">Received</a></td>
</tr>
</table>
<div id="pageNavPosition"></div>
<br />
</form>
<script type="text/javascript"><!--
reportsPerPage = listDisplayPerPg.options[listDisplayPerPg.selectedIndex].value;
var pager = new Pager('tadminViewReport', reportsPerPage);
pager.init();
pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
//--></script>
function Pager(tableName, itemsPerPage) {
//function Pager(tableName, itemsPerPage) {
this.tableName = tableName;
// this.itemsPerPage = itemsPerPage;
this.currentPage = 1;
this.pages = 0;
this.inited = false;
this.showRecords = function(from, to) {
var rows = document.getElementById(tableName).rows;
// i starts from 1 to skip table header row
for (var i = 1; i < rows.length; i++) {
if (i < from || i > to)
rows[i].style.display = 'none';
else
rows[i].style.display = '';
}
}
this.showPage = function(pageNumber) {
if (! this.inited) {
alert("not inited");
return;
}
var oldPageAnchor = document.getElementById('pg'+this.currentPage);
oldPageAnchor.className = 'pg-normal';
this.currentPage = pageNumber;
var newPageAnchor = document.getElementById('pg'+this.currentPage);
newPageAnchor.className = 'pg-selected';
var from = (pageNumber - 1) * itemsPerPage + 1;
var to = from + itemsPerPage - 1;
this.showRecords(from, to);
var pgNext = document.getElementById(this.pagerName + 'pgNext');
var pgPrev = document.getElementById(this.pagerName + 'pgPrev');
if (pgNext != null) {
if (this.currentPage == this.pages) pgNext.style.display = 'none';
else pgNext.style.display = '';
}
if (pgPrev != null) {
if (this.currentPage == 1) pgPrev.style.display = 'none';
else pgPrev.style.display = '';
}
}
this.prev = function() {
if (this.currentPage > 1)
this.showPage(this.currentPage - 1);
}
this.next = function() {
if (this.currentPage < this.pages) {
this.showPage(this.currentPage + 1);
}
}
this.init = function() {
var rows = document.getElementById(tableName).rows;
var records = (rows.length - 1);
this.pages = Math.ceil(records / itemsPerPage);
this.inited = true;
}
this.showPageNav = function(pagerName, positionId) {
if (! this.inited) {
alert("not inited");
return;
}
var element = document.getElementById(positionId);
var pagerHtml = '<span id="' + pagerName + 'pgPrev" onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev </span> ';
for (var page = 1; page <= this.pages; page++)
pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> ';
pagerHtml += '<span id="' + pagerName + 'pgNext" onclick="'+ pagerName+'.next();" class="pg-normal"> Next »</span>';
element.innerHTML = pagerHtml;
}
}
每页报告
2.
4.
6.
8.
用户名
报告ID
报告标题
提交日期
地位
用户名1
报告ID1
文件1
日期1
用户名2
报告ID2
文件2
日期2
用户名3
报告ID3
文件3
日期3
用户名4
报告ID4
文件4
日期4
用户名5
报告ID5
文件5
日期5
用户名6
报告ID6
文件6
日期6
用户名7
报告ID7
文件7
日期7
用户名8
报告ID8
文件8
日期8
用户名9
报告ID9
文件9
日期9
用户名10
报告ID10
文件10
日期10
功能页（表名、项目页）{
//功能页（表名、项目页）{
this.tableName=tableName；
//this.itemsPerPage=itemsPerPage；
this.currentPage=1；
此参数为0；
this.inited=false；
this.showRecords=函数（从，到）{
var rows=document.getElementById（tableName）.rows；
//我从1开始跳过表格标题行
对于（变量i=1；i到）
行[i].style.display='none'；
其他的
行[i]。style.display=''；
}
}
this.showPage=函数（页码）{
如果（！this.inited）{
警报（“未初始化”）；
返回；
}
var oldPageAnchor=document.getElementById（'pg'+this.currentPage）；
oldPageAnchor.className='pg normal'；
this.currentPage=页码；
var newPageAnchor=document.getElementById（'pg'+this.currentPage）；
newPageAnchor.className='pg selected'；
变量from=（页码-1）*itemsPerPage+1；
var to=from+itemsPerPage-1；
此。showRecords（从，到）；
var pgNext=document.getElementById（this.pagerName+'pgNext'）；
var pgPrev=document.getElementById（this.pagerName+'pgPrev'）；
if（pgNext！=null）{
如果（this.currentPage==this.pages）pgNext.style.display='none'；
else pgNext.style.display=''；
}
如果（pgPrev！=null）{
如果（this.currentPage==1）pgPrev.style.display='none'；
else pgPrev.style.display=''；
}
}
this.prev=函数（）{
如果（此.currentPage>1）
this.showPage（this.currentPage-1）；
}
this.next=函数（）{
如果（this.currentPage
基本上这是唯一的改变
var from = (pageNumber - 1) * itemsPerPage + 1;
var to = from + itemsPerPage - 1;
将其更改为：
var from = (pageNumber - 1) * Number(itemsPerPage) + 1;
var to = (from + Number(itemsPerPage)) - 1;
如果您不知道如何使用Chrome Developers Tool/Firebug调试javascript，我强烈建议您学习这一点。这是一项非常有用的技能！我知道它是有效的
基本上这是唯一的改变
var from = (pageNumber - 1) * itemsPerPage + 1;
var to = from + itemsPerPage - 1;
将其更改为：
var from = (pageNumber - 1) * Number(itemsPerPage) + 1;
var to = (from + Number(itemsPerPage)) - 1;
如果您不知道如何使用Chrome Developers Tool/Firebug调试javascript，我强烈建议您学习。这是一项非常有用的技能！谢谢heaps！但我已经测试了我的代码，它只在Chrome上工作，而在IE8或Firefox或Opera上不工作。有什么想法吗？谢谢heaps！但我已经测试了我的代码，它只在Chrome上工作，但是不是在IE8、Firefox或Opera上。有什么想法吗？