Пейджинговый JavaScript

Question

Я пытаюсь создать простую жестко запрограммированную систему подкачки через html и javascript.Я дал каждому элементу идентификатор 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 элемента?WTF?LOL, первая страница - это номер «22-13», а вторая страница - «12-2», третья страница должна быть «2-1». Спасибо!

Answer 1

Есть ли причина, по которой вы не используете плагин JQuery Pagination ? Взгляните на демонстрацию .

Если вам нужна ссылка на определенную страницу, посмотрите этот ответ .

Answer 2

окружите свои предметы этим 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

Answer 3

Я понял вашу точку зрения.Вы можете использовать этот модифицированный скрипт для той же цели.Я надеюсь, что это помогает.(Вам не нужно менять свою 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>