Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>MVC design would suggest rendering Next &amp; Prev URLS on the server, which knows how many pages there are in total;</p> <p>Or at least rendering a pre-prepared 'base URL' and 'pageCount' into JS variables, so producing a valid URL is trivial in Javascript.</p> <p>An example in JSP:</p> <pre><code>&lt;script type='text/javascript'&gt; var baseUrl = ${baseUrl}; var numPages = ${numPages}; var currPage = ${currPage}; function changePage (delta) { var newPage = ((currPage + delta) % numPages); // 0-based. var newUrl = baseUrl + newPage + ".html"; // var newUrl = baseUrl + newPage; window.location = newUrl; } $(document).load( function(){ $(".leftArrow a").click( function(){ changePage(-1)}); $(".rightArrow a").click( function(){ changePage(+1)}); }); </code></pre> <p>If your page-numbers are 1-based, the % 'modulus' expression either has to be more complex (subtract 1 beforehand, add 1 after) or you can do an if statement.</p> <pre><code> function changePage (delta) { // 1-based PageNumber version. var newPage = currPage + delta; if (newPage &lt;= 0) newPage = numPages; if (newPage &gt; numPages) newPage = 1; // ... as before. </code></pre> <p>Or via modulo:</p> <pre><code> var newPage = ((currPage-1 + delta) % numPages) + 1; </code></pre> <p>Pick which you find clearest &amp; most maintainable, if you were coming back to the code in 2 years time!</p> <p><strong>[Edited]</strong> If no server-side smarts at all, just put <em>constants</em> into the JS. You can also separate the constants/or calculation of base-URL, from the active part of the script.. thus making it reusable across several pages.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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