Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Without numbers (the <em>page</em> variable needs to become global in order to be able to manage which page you're currently on):</p> <pre><code>$(document).ready(function () { var page = 1; var itemsPerPage = 4; var prev = "&lt;&lt;"; var next = "&gt;&gt;"; var $entries = $("#entries"); var $list = $entries.children("ul:first"); $list.children().eq(itemsPerPage).nextAll().andSelf().hide(); var $pagination = $("&lt;ul class='pagination'&gt;&lt;/ul&gt;").each(function () { var itemsTotal = $list.children().size(); var pages = Math.ceil(itemsTotal / itemsPerPage); $(this).append("&lt;li&gt;" + prev + "&lt;/li&gt;"); $(this).append("&lt;li&gt;" + next + "&lt;/li&gt;"); }).appendTo($entries); $pagination.children("li:first").hide(); $pagination.children().click(function () { if ($(this).text() == prev) page = page - 1; else if ($(this).text() == next) page = page + 1; var firstToShow = (page - 1) * itemsPerPage; var lastToShow = page * itemsPerPage; $list.children().hide().slice(firstToShow, lastToShow).slideDown('slow'); $($(this).parent().find("li")[page]).addClass("selected").siblings(".selected").removeClass("selected"); if (page == 1) $(this).parent().find("li:first").hide(); else $(this).parent().find("li:first").show(); if (page == Math.ceil($list.children().size() / itemsPerPage)) $(this).parent().find("li:last").hide(); else $(this).parent().find("li:last").show(); }); }); </code></pre> <p>With numbers (which page you're currently on can continue to be managed via the <em>.selected</em> class):</p> <pre><code>$(document).ready(function () { var itemsPerPage = 4; var prev = "&lt;&lt;"; var next = "&gt;&gt;"; var $entries = $("#entries"); var $list = $entries.children("ul:first"); $list.children().eq(itemsPerPage).nextAll().andSelf().hide(); var $pagination = $("&lt;ul class='pagination'&gt;&lt;/ul&gt;").each(function () { var itemsTotal = $list.children().size(); var pages = Math.ceil(itemsTotal / itemsPerPage); $(this).append("&lt;li&gt;" + prev + "&lt;/li&gt;"); for (var i = 1; i &lt;= pages; i += 1) { $(this).append("&lt;li&gt;" + i + "&lt;/li&gt;"); } $(this).append("&lt;li&gt;" + next + "&lt;/li&gt;"); }).appendTo($entries); $pagination.children("li:first").hide(); $pagination.children("li:eq(1)").addClass("selected"); $pagination.children().click(function () { if ($(this).is(".selected")) { return; } var page; var selectedNode = $(this).parent().find(".selected"); if ($(this).text() == prev) page = selectedNode.index() - 1; else if ($(this).text() == next) page = selectedNode.index() + 1; else page = $(this).index(); var firstToShow = (page - 1) * itemsPerPage; var lastToShow = page * itemsPerPage; $list.children().hide().slice(firstToShow, lastToShow).slideDown('slow'); $($(this).parent().find("li")[page]).addClass("selected").siblings(".selected").removeClass("selected"); if (page == 1) $(this).parent().find("li:first").hide(); else $(this).parent().find("li:first").show(); if (page == Math.ceil($list.children().size() / itemsPerPage)) $(this).parent().find("li:last").hide(); else $(this).parent().find("li:last").show(); }); }); </code></pre>
    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. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. 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