Databases
StackOverflow2013
Postsdbo
POPaging javascript
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POPaging javascript
    primarykey
    data
    text
    <p>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.</p> <p>(I know this is a very inconvenient paging system but it's just for experimental purposes.)</p> <p>So. my code html is as listed below -</p> <pre><code>&lt;div id="PM-22"&gt;item 1&lt;/div&gt; &lt;div id="PM-21"&gt;item 2&lt;/div&gt; &lt;div id="PM-20"&gt;item 3&lt;/div&gt; &lt;div id="PM-19"&gt;item 4&lt;/div&gt; &lt;div id="PM-18"&gt;item 5&lt;/div&gt; &lt;div id="PM-17"&gt;item 6&lt;/div&gt; &lt;div id="PM-16"&gt;item 7&lt;/div&gt; &lt;div id="PM-15"&gt;item 8&lt;/div&gt; &lt;div id="PM-14"&gt;item 9&lt;/div&gt; &lt;div id="PM-13"&gt;item 10&lt;/div&gt; &lt;div id="PM-12"&gt;item 11&lt;/div&gt; &lt;div id="PM-11"&gt;item 12&lt;/div&gt; &lt;div id="PM-10"&gt;item 13&lt;/div&gt; &lt;div id="PM-9"&gt;item 14&lt;/div&gt; &lt;div id="PM-8"&gt;item 15&lt;/div&gt; &lt;div id="PM-7"&gt;item 16&lt;/div&gt; &lt;div id="PM-6"&gt;item 17&lt;/div&gt; &lt;div id="PM-5"&gt;item 18&lt;/div&gt; &lt;div id="PM-4"&gt;item 19&lt;/div&gt; &lt;div id="PM-3"&gt;item 20&lt;/div&gt; &lt;div id="PM-2"&gt;item 21&lt;/div&gt; &lt;div id="PM-1"&gt;item 22&lt;/div&gt; &lt;span style="text-align:right;"&gt;&lt;p&gt;Page &lt;a href="javascript:PMPaging(24,1)"&gt;1&lt;/a&gt; &lt;a href="javascript:PMPaging(24,2)"&gt;2&lt;/a&gt; &lt;a href="javascript:PMPaging(24,3)"&gt;3&lt;/a&gt;&lt;/p&gt;&lt;/span&gt; </code></pre> <p>And my javascript function as as follows -</p> <pre><code>&lt;script type="text/javascript"&gt; function PMPaging(num,pg) { pg *= 10; var upperlim = num - pg - 10; var lowerlim = upperlim - 10; if(lowerlim &lt; 0) { lowerlim =0;} for(num; num &gt; 0; num--) { document.getElementById('PM-'+num).style.display = 'none'; while (num &lt;= upperlim &amp;&amp; num &gt; lowerlim) { document.getElementById('PM-'+num).style.display = 'block'; num--; } } } &lt;/script&gt; </code></pre> <p><em>Assume first 10 items are showing only on page load and the rest are hidden -</em> 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!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USMatt
    plurals
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POPaging javascript
      1. USLynn
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload