Paging javascript

I'm trying to make a simple hard coded paging system via html and javascript. I have given each element an id PM-1, PM-2, PM-3, etc and each page will list 10 of these items.

(I know this is a very inconvenient paging system but it's just for experimental purposes.)

So. my code html is as listed below -

<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>

And my javascript function as as follows -

<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>

Assume first 10 items are showing only on page load and the rest are hidden - Now whenever I run this code, it does show the first 10 items only, but when i click page 2 or 3 nothing happens, and if I click page 1 it shows the last 2 items? wtf? lol, first page is id number "22-13" and second page is "12-2", third page should be "2-1"..Thanks!

Is there a reason you aren't using the JQuery Pagination Plugin? Have a look at the demonstration.

If you need to be able to link to a specific page, have a look at this answer.

I get your point. You can use this modified script for the same purpose. I hope it helps. (You don't have to change your html part.

<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>

surround your items with this 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>

then use this code for 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

to turn pages, use:

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