Tip: Click lines to highlight, hold ctrl/cmd to multi-select

pager (13-Dec @ 16:20)

www.flickr.com-photos-bjarlestam

Syntax Highlighted Code

  1. /*
  2.  * Pager - jQuery plugin to format serch result pagers
  3.  */
  4.  
  5. ;(function($) {
  6.  
  7.     function assertHasClass(element, c, errormsg) {
  8.         if(!$(element).hasClass(c)) {throw errormsg;}
  9.     }
  10.    
  11.     $.extend($.fn, {
  12.         showPager: function(callback, size) {
  13.             var PAGER_SIZE = parseInt(size) || 14;
  14.             $(this).each(function() {
  15.                 assertHasClass(this, 'pager', "element must be a pager");
  16.  
  17.                 var pages = jQuery('.page:not(.nextPage, .previousPage)', this);
  18.                 if(pages.length <= PAGER_SIZE) {
  19.                     pages.show();
  20.                 } else {
  21.                     var current = pages.index(pages.filter('.currentPage'));
  22.                     if(current<=PAGER_SIZE-4) {
  23.                         pages.each(function(i) {
  24.                             var page = jQuery(this);
  25.                             if(i === PAGER_SIZE - 2){
  26.                                 page.replaceWith('<span>...</span>');
  27.                             }else if(i<PAGER_SIZE - 1) {
  28.                                 page.show();
  29.                             } else if(i === pages.length - 1) {
  30.                                 page.show();
  31.                             }
  32.                         });
  33.                     } else if(current > pages.length-(PAGER_SIZE-2)) {
  34.                         pages.each(function(i) {
  35.                             var page = jQuery(this);
  36.                             if(i === 0){
  37.                                 page.show();
  38.                             }else if(i === 1){
  39.                                 page.replaceWith('<span>...</span>');
  40.                             }else if(i > pages.length - (PAGER_SIZE-1)) {
  41.                                 page.show();
  42.                             }
  43.                         });
  44.                     } else {
  45.                         pages.each(function(i) {
  46.                             var page = jQuery(this);
  47.                             if(i === 0){
  48.                                 page.show();
  49.                             }else if(i === 1){
  50.                                 page.replaceWith('<span>...</span>');
  51.                             }else if(i === pages.length -1) {
  52.                                 page.show();
  53.                             }else if(i === pages.length - 2){
  54.                                 page.replaceWith('<span>...</span>');
  55.                             }else if(i > (current - Math.floor(PAGER_SIZE/2)+2) && (i < (current + Math.floor(PAGER_SIZE/2) - 1))) {
  56.                                 page.show();
  57.                             }
  58.                         });
  59.                     }
  60.                 }
  61.                
  62.                 if(typeof callback == 'function') {
  63.                     jQuery('a.page', this).click(function() {
  64.                         callback(this.href.slice(this.href.lastIndexOf('#')+1, this.href.length));
  65.                     });
  66.                 }
  67.  
  68.                 return this;
  69.             });
  70.         }
  71.     });
  72. })(jQuery);
  73.  
  74.  
  75.  
  76. <%@ attribute name="current" required="true" rtexprvalue="true" type="java.lang.Integer" %>
  77. <%@ attribute name="pages" required="true" rtexprvalue="true" type="java.util.Collection" %>
  78.  
  79. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
  80. <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
  81. <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
  82.  
  83. <span class="pager">
  84. <c:choose>
  85.     <c:when test="${current > 1}"><a class="page previousPage" href="#${current - 1}"><fmt:message key="general.previous"/></a></c:when>
  86.     <c:otherwise><span class="page previousPage"><fmt:message key="general.previous"/></span></c:otherwise>    
  87. </c:choose>
  88. <c:forEach var="page" items="${pages}">
  89.     <c:choose>
  90.         <c:when test="${page == current}">
  91.             <span class="page currentPage" style="display: none">${page}</span>
  92.         </c:when>
  93.         <c:when test="${page == -1}">
  94.             <span class="page break">...</span>
  95.         </c:when>
  96.         <c:otherwise>
  97.             <a class="page" href="#${page}" style="display: none">${page}</a>
  98.         </c:otherwise>
  99.     </c:choose>
  100. </c:forEach>
  101. <c:choose>
  102.     <c:when test="${current < fn:length(pages)}"><a class="page nextPage" href="#${current + 1}"><fmt:message key="general.next"/></a></c:when>
  103.     <c:otherwise><span class="page nextPage"><fmt:message key="general.next"/></span></c:otherwise>    
  104. </c:choose>
  105. </span>
  106.  

Plain Code

/*
 * Pager - jQuery plugin to format serch result pagers
 */

;(function($) {

    function assertHasClass(element, c, errormsg) {
        if(!$(element).hasClass(c)) {throw errormsg;}
    }
    
    $.extend($.fn, {
        showPager: function(callback, size) {
            var PAGER_SIZE = parseInt(size) || 14;
            $(this).each(function() {
                assertHasClass(this, 'pager', "element must be a pager");

                var pages = jQuery('.page:not(.nextPage, .previousPage)', this);
                if(pages.length <= PAGER_SIZE) {
                    pages.show();
                } else {
                    var current = pages.index(pages.filter('.currentPage'));
                    if(current<=PAGER_SIZE-4) {
                        pages.each(function(i) {
                            var page = jQuery(this);
                            if(i === PAGER_SIZE - 2){
                                page.replaceWith('<span>...</span>');
                            }else if(i<PAGER_SIZE - 1) {
                                page.show();
                            } else if(i === pages.length - 1) {
                                page.show();
                            }
                        });
                    } else if(current > pages.length-(PAGER_SIZE-2)) {
                        pages.each(function(i) {
                            var page = jQuery(this);
                            if(i === 0){
                                page.show();
                            }else if(i === 1){
                                page.replaceWith('<span>...</span>');
                            }else if(i > pages.length - (PAGER_SIZE-1)) {
                                page.show();
                            }
                        });
                    } else {
                        pages.each(function(i) {
                            var page = jQuery(this);
                            if(i === 0){
                                page.show();
                            }else if(i === 1){
                                page.replaceWith('<span>...</span>');
                            }else if(i === pages.length -1) {
                                page.show();
                            }else if(i === pages.length - 2){
                                page.replaceWith('<span>...</span>');
                            }else if(i > (current - Math.floor(PAGER_SIZE/2)+2) && (i < (current + Math.floor(PAGER_SIZE/2) - 1))) {
                                page.show();
                            }
                        });
                    }
                }
                
                if(typeof callback == 'function') {
                    jQuery('a.page', this).click(function() {
                        callback(this.href.slice(this.href.lastIndexOf('#')+1, this.href.length));
                    });
                }

                return this;
            });
        }
    });
})(jQuery);



<%@ attribute name="current" required="true" rtexprvalue="true" type="java.lang.Integer" %>
<%@ attribute name="pages" required="true" rtexprvalue="true" type="java.util.Collection" %>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<span class="pager">
<c:choose>
    <c:when test="${current > 1}"><a class="page previousPage" href="#${current - 1}"><fmt:message key="general.previous"/></a></c:when>
    <c:otherwise><span class="page previousPage"><fmt:message key="general.previous"/></span></c:otherwise>    
</c:choose>
<c:forEach var="page" items="${pages}">
    <c:choose>
        <c:when test="${page == current}">
            <span class="page currentPage" style="display: none">${page}</span>
        </c:when>
        <c:when test="${page == -1}">
            <span class="page break">...</span>
        </c:when>
        <c:otherwise>
            <a class="page" href="#${page}" style="display: none">${page}</a>
        </c:otherwise>
    </c:choose>
</c:forEach>
<c:choose>
    <c:when test="${current < fn:length(pages)}"><a class="page nextPage" href="#${current + 1}"><fmt:message key="general.next"/></a></c:when>
    <c:otherwise><span class="page nextPage"><fmt:message key="general.next"/></span></c:otherwise>    
</c:choose>
</span>

Codedump Run

Permalink: http://codedumper.com/pager