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。

Answer 2

我明白你的观点。您可以将此修改后的脚本用于相同目的。我希望它有所帮助。（您不必更改您的HTML部分。

<script type="text/javascript">

function PMPaging(num,pg) {
    pg *= 10;
    var upperlim = pg+1;
    var lowerlim = upperlim - 10;
    if(lowerlim < 0) { lowerlim =1;}
    for(i=1; i <= num; i++) {
        if(i<=upperlim && i>=lowerlim){
            document.getElementById('PM-'+i).style.display = 'block';
        }else{
            document.getElementById('PM-'+i).style.display = 'none';
        }
    }
}

</script>

Answer 3

使用此div围绕您的项目：

 <div class="itms">
        <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>
    </div>
<span style="text-align:left;"><p>Page <a href="javascript:P.turnPage(1)">1</a> <a href="javascript:P.turnPage(2)">2</a> <a href="javascript:P.turnPage(3)">3</a></p></span>

然后将此代码用于JS：

    function Paginate(itemsPerPage) {
        var items = document.querySelectorAll(".itms div"),
            iL = items.length || 0;

        this.turnPage = function(pageNum) {
            var startItem = (pageNum*itemsPerPage) - itemsPerPage;
            for (var i = 0; i < iL; i++) {
                items[i].style.display = (startItem <= i && i < (startItem + itemsPerPage)) ? "block" : "none";
            }
        }
    }
var P = new Paginate(10);//10 items per page

要翻页，请使用：

P.turnPage(2); //2 for the page Number

分页javascript

3 个答案: