javascript - 分页javascript

Question

我正在尝试通过 html 和 javascript 制作一个简单的硬编码分页系统。 我为每个元素指定了 ID PM-1、PM-2、PM-3 等，每个页面将列出其中的 10 个项目。

(我知道这是一个非常不方便的分页系统，但它只是用于实验目的。)

所以。我的代码 html 如下所列 -

<div id="PM-22">item 1</div>
<div id="PM-21">item 2</div>
<div id="PM-20">item 3</div>
<div id="PM-19">item 4</div>
<div id="PM-18">item 5</div>
<div id="PM-17">item 6</div>
<div id="PM-16">item 7</div>
<div id="PM-15">item 8</div>
<div id="PM-14">item 9</div>
<div id="PM-13">item 10</div>
<div id="PM-12">item 11</div>
<div id="PM-11">item 12</div>
<div id="PM-10">item 13</div>
<div id="PM-9">item 14</div>
<div id="PM-8">item 15</div>
<div id="PM-7">item 16</div>
<div id="PM-6">item 17</div>
<div id="PM-5">item 18</div>
<div id="PM-4">item 19</div>
<div id="PM-3">item 20</div>
<div id="PM-2">item 21</div>
<div id="PM-1">item 22</div>
<span style="text-align:right;"><p>Page <a href="javascript:PMPaging(24,1)">1</a> <a href="javascript:PMPaging(24,2)">2</a> <a href="javascript:PMPaging(24,3)">3</a></p></span>

我的javascript函数如下 -

<script type="text/javascript">
                        function PMPaging(num,pg) {
                            pg *= 10;
                            var upperlim = num - pg - 10;
                            var lowerlim = upperlim - 10;
                            if(lowerlim < 0) { lowerlim =0;}
                            for(num; num > 0; num--) {
                                document.getElementById('PM-'+num).style.display = 'none';
                                while (num <= upperlim && num > lowerlim) {
                                    document.getElementById('PM-'+num).style.display = 'block';
                                    num--;
                                }
                            }
                        }

</script>

假设前 10 个项目仅在页面加载时显示，其余的则隐藏 - 现在，每当我运行此代码时，它确实仅显示前 10 个项目，但是当我单击第 2 或第 3 页时没有任何反应，如果我单击第 1 页，它会显示最后 2 项？哇？哈哈，第一页的 ID 号是“22-13”，第二页是“12-2”，第三页应该是“2-1”..谢谢!

Answer 1

您不使用JQuery Pagination Plugin有什么原因吗？ ？看看demonstration .

如果您需要能够链接到特定页面，请查看 this answer .