Paginaçao com JQuery

Felipe Prudêncio · Abril 21, 2014

Olá.Achei um sistema de paginaçao em JQuery e ele mostra 5 artigos na horizontal mas eu n consigo fazer ele mostrar 11.Sou iniciante em javascript então considerem.

index.php

<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
  <title>pagination</title>
  <meta name="description" content="pagination">
  <meta name="keywords" content="jquery, pagination, javascript, plugin" />
  <meta name="author" content="Luís Almeida">
 
  <meta name="viewport" content="width=device-width,initial-scale=1">
 
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/jPages.css">
  <link rel="stylesheet" href="css/animate.css">
  <link rel="stylesheet" href="css/github.css">
 
  <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="js/highlight.pack.js"></script>
  <script type="text/javascript" src="js/tabifier.js"></script>
  <script src="js/js.js"></script>
  <script src="js/jPages.js"></script>
 
 
  <script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-28718218-1']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
  </script>
 
  <script>
  /* when document is ready */
  $(function(){
 
    /* initiate the plugin */
    $("div.holder").jPages({
      containerID  : "itemContainer",
      perPage      : 10,
      startPage    : 1,
      startRange   : 1,
      midRange     : 5,
      endRange     : 1
    });
 
  });
  </script>
 
  <style type="text/css">
  .holder {
    margin: 15px 0;
  }
 
  .holder a {
    font-size: 12px;
    cursor: pointer;
    margin: 0 5px;
    color: #333;
  }
 
  .holder a:hover {
    background-color: #222;
    color: #fff;
  }
 
  .holder a.jp-previous { margin-right: 15px; }
  .holder a.jp-next { margin-left: 15px; }
 
  .holder a.jp-current, a.jp-current:hover {
    color: #FF4242;
    font-weight: bold;
  }
 
  .holder a.jp-disabled, a.jp-disabled:hover {
    color: #bbb;
  }
 
  .holder a.jp-current, a.jp-current:hover,
  .holder a.jp-disabled, a.jp-disabled:hover {
    cursor: default;
    background: none;
  }
 
  .holder span { margin: 0 5px; }
  </style>
 
</head>
<body>
 
 
 
  <div id="container" class="clearfix">
 
    <div id="sidebar">
 
 
 
    </div> <!--! end of #sidebar -->
 
    <div id="content" class="defaults">
 
 
 
 
 
      <!-- item container -->
      <ul id="itemContainer">
        <li><img src="img/img (1).jpg" alt="image"></li><li><img src="img/img (2).jpg" alt="image"></li><li><img src="img/img (3).jpg" alt="image"></li><li><img src="img/img (4).jpg" alt="image"></li><li><img src="img/img (5).jpg" alt="image"></li><li><img src="img/img (6).jpg" alt="image"></li><li><img src="img/img (7).jpg" alt="image"></li><li><img src="img/img (8).jpg" alt="image"></li><li><img src="img/img (9).jpg" alt="image"></li><li><img src="img/img (10).jpg" alt="image"></li><li><img src="img/img (11).jpg" alt="image"></li><li><img src="img/img (12).jpg" alt="image"></li><li><img src="img/img (13).jpg" alt="image"></li><li><img src="img/img (14).jpg" alt="image"></li><li><img src="img/img (15).jpg" alt="image"></li><li><img src="img/img (16).jpg" alt="image"></li><li><img src="img/img (17).jpg" alt="image"></li><li><img src="img/img (18).jpg" alt="image"></li><li><img src="img/img (19).jpg" alt="image"></li><li><img src="img/img (20).jpg" alt="image"></li><li><img src="img/img (21).jpg" alt="image"></li><li><img src="img/img (22).jpg" alt="image"></li><li><img src="img/img (23).jpg" alt="image"></li><li><img src="img/img (24).jpg" alt="image"></li><li><img src="img/img (25).jpg" alt="image"></li><li><img src="img/img (26).jpg" alt="image"></li><li><img src="img/img (27).jpg" alt="image"></li><li><img src="img/img (28).jpg" alt="image"></li><li><img src="img/img (29).jpg" alt="image"></li><li><img src="img/img (30).jpg" alt="image"></li><li><img src="img/img (31).jpg" alt="image"></li><li><img src="img/img (32).jpg" alt="image"></li><li><img src="img/img (33).jpg" alt="image"></li><li><img src="img/img (34).jpg" alt="image"></li><li><img src="img/img (35).jpg" alt="image"></li><li><img src="img/img (36).jpg" alt="image"></li><li><img src="img/img (37).jpg" alt="image"></li><li><img src="img/img (38).jpg" alt="image"></li><li><img src="img/img (39).jpg" alt="image"></li><li><img src="img/img (40).jpg" alt="image"></li><li><img src="img/img (41).jpg" alt="image"></li><li><img src="img/img (42).jpg" alt="image"></li><li><img src="img/img (43).jpg" alt="image"></li><li><img src="img/img (44).jpg" alt="image"></li><li><img src="img/img (45).jpg" alt="image"></li><li><img src="img/img (46).jpg" alt="image"></li><li><img src="img/img (47).jpg" alt="image"></li><li><img src="img/img (48).jpg" alt="image"></li><li><img src="img/img (49).jpg" alt="image"></li><li><img src="img/img (50).jpg" alt="image"></li><li><img src="img/img (51).jpg" alt="image"></li><li><img src="img/img (52).jpg" alt="image"></li><li><img src="img/img (53).jpg" alt="image"></li><li><img src="img/img (54).jpg" alt="image"></li><li><img src="img/img (55).jpg" alt="image"></li><li><img src="img/img (56).jpg" alt="image"></li><li><img src="img/img (57).jpg" alt="image"></li><li><img src="img/img (58).jpg" alt="image"></li><li><img src="img/img (59).jpg" alt="image"></li><li><img src="img/img (60).jpg" alt="image"></li><li><img src="img/img (61).jpg" alt="image"></li><li><img src="img/img (62).jpg" alt="image"></li><li><img src="img/img (63).jpg" alt="image"></li><li><img src="img/img (64).jpg" alt="image"></li><li><img src="img/img (65).jpg" alt="image"></li><li><img src="img/img (66).jpg" alt="image"></li><li><img src="img/img (67).jpg" alt="image"></li><li><img src="img/img (68).jpg" alt="image"></li><li><img src="img/img (69).jpg" alt="image"></li><li><img src="img/img (70).jpg" alt="image"></li><li><img src="img/img (71).jpg" alt="image"></li><li><img src="img/img (72).jpg" alt="image"></li><li><img src="img/img (73).jpg" alt="image"></li><li><img src="img/img (74).jpg" alt="image"></li><li><img src="img/img (75).jpg" alt="image"></li><li><img src="img/img (76).jpg" alt="image"></li><li><img src="img/img (77).jpg" alt="image"></li><li><img src="img/img (78).jpg" alt="image"></li><li><img src="img/img (79).jpg" alt="image"></li><li><img src="img/img (80).jpg" alt="image"></li><li><img src="img/img (81).jpg" alt="image"></li><li><img src="img/img (82).jpg" alt="image"></li><li><img src="img/img (83).jpg" alt="image"></li><li><img src="img/img (84).jpg" alt="image"></li><li><img src="img/img (85).jpg" alt="image"></li><li><img src="img/img (86).jpg" alt="image"></li><li><img src="img/img (87).jpg" alt="image"></li><li><img src="img/img (88).jpg" alt="image"></li><li><img src="img/img (89).jpg" alt="image"></li><li><img src="img/img (90).jpg" alt="image"></li><li><img src="img/img (91).jpg" alt="image"></li><li><img src="img/img (92).jpg" alt="image"></li><li><img src="img/img (93).jpg" alt="image"></li><li><img src="img/img (94).jpg" alt="image"></li><li><img src="img/img (95).jpg" alt="image"></li><li><img src="img/img (96).jpg" alt="image"></li><li><img src="img/img (97).jpg" alt="image"></li><li><img src="img/img (98).jpg" alt="image"></li><li><img src="img/img (99).jpg" alt="image"></li><li><img src="img/img (100).jpg" alt="image"></li><li><img src="img/img (101).jpg" alt="image"></li><li><img src="img/img (102).jpg" alt="image"></li><li><img src="img/img (103).jpg" alt="image"></li><li><img src="img/img (104).jpg" alt="image"></li><li><img src="img/img (105).jpg" alt="image"></li><li><img src="img/img (106).jpg" alt="image"></li><li><img src="img/img (107).jpg" alt="image"></li><li><img src="img/img (108).jpg" alt="image"></li><li><img src="img/img (109).jpg" alt="image"></li><li><img src="img/img (110).jpg" alt="image"></li><li><img src="img/img (111).jpg" alt="image"></li><li><img src="img/img (112).jpg" alt="image"></li><li><img src="img/img (113).jpg" alt="image"></li><li><img src="img/img (114).jpg" alt="image"></li><li><img src="img/img (115).jpg" alt="image"></li><li><img src="img/img (116).jpg" alt="image"></li><li><img src="img/img (117).jpg" alt="image"></li><li><img src="img/img (118).jpg" alt="image"></li><li><img src="img/img (119).jpg" alt="image"></li><li><img src="img/img (120).jpg" alt="image"></li><li><img src="img/img (121).jpg" alt="image"></li><li><img src="img/img (122).jpg" alt="image"></li><li><img src="img/img (123).jpg" alt="image"></li><li><img src="img/img (124).jpg" alt="image"></li><li><img src="img/img (125).jpg" alt="image"><li><img src="img/img (126).jpg" alt="image"></li><li><img src="img/img (127).jpg" alt="image"></li><li><img src="img/img (128).jpg" alt="image"></li><li><img src="img/img (129).jpg" alt="image"></li><li><img src="img/img (130).jpg" alt="image"></li><li><img src="img/img (131).jpg" alt="image"></li><li><img src="img/img (132).jpg" alt="image"></li><li><img src="img/img (133).jpg" alt="image"></li><li><img src="img/img (134).jpg" alt="image"></li><li><img src="img/img (135).jpg" alt="image"></li><li><img src="img/img (136).jpg" alt="image"></li><li><img src="img/img (137).jpg" alt="image"></li><li><img src="img/img (138).jpg" alt="image"></li>
      </ul>
      <!-- navigation holder -->
      <div class="holder"></div>
    
    </div> <!--! end of #content -->
  </div> <!--! end of #container -->
</body>
</html>

jpages.js


 /**
 * jQuery jPages v0.7
 * Client side pagination with jQuery
 * http://luis-almeida.github.com/jPages
 *
 * Licensed under the MIT license.
 * Copyright 2012 Luís Almeida
 * https://github.com/luis-almeida
 */
 
;(function($, window, document, undefined) {
 
  var name = "jPages",
      instance = null,
      defaults = {
        containerID: "",
        first: false,
        previous: "← previous",
        next: "next →",
        last: false,
        links: "numeric", // blank || title
        startPage: 1,
        perPage: 10,
        midRange: 5,
        startRange: 1,
        endRange: 1,
        keyBrowse: false,
        scrollBrowse: false,
        pause: 0,
        clickStop: false,
        delay: 50,
        direction: "forward", // backwards || auto || random ||
        animation: "", // http://daneden.me/animate/ - any entrance animations
        fallback: 400,
        minHeight: true,
        callback: undefined // function( pages, items ) { }
      };
 
 
  function Plugin(element, options) {
    this.options = $.extend({}, defaults, options);
 
    this._container = $("#" + this.options.containerID);
    if (!this._container.length) return;
 
    this.jQwindow = $(window);
    this.jQdocument = $(document);
 
    this._holder = $(element);
    this._nav = {};
 
    this._first = $(this.options.first);
    this._previous = $(this.options.previous);
    this._next = $(this.options.next);
    this._last = $(this.options.last);
 
    /* only visible items! */
    this._items = this._container.children(":visible");
    this._itemsShowing = $([]);
    this._itemsHiding = $([]);
 
    this._numPages = Math.ceil(this._items.length / this.options.perPage);
    this._currentPageNum = this.options.startPage;
 
    this._clicked = false;
    this._cssAnimSupport = this.getCSSAnimationSupport();
 
    this.init();
  }
 
  Plugin.prototype = {
 
    constructor : Plugin,
 
    getCSSAnimationSupport : function() {
      var animation = false,
          animationstring = 'animation',
          keyframeprefix = '',
          domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
          pfx = '',
          elm = this._container.get(0);
 
      if (elm.style.animationName) animation = true;
 
      if (animation === false) {
        for (var i = 0; i < domPrefixes.length; i++) {
          if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
            pfx = domPrefixes[i];
            animationstring = pfx + 'Animation';
            keyframeprefix = '-' + pfx.toLowerCase() + '-';
            animation = true;
            break;
          }
        }
      }
 
      return animation;
    },
 
    init : function() {
      this.setStyles();
      this.setNav();
      this.paginate(this._currentPageNum);
      this.setMinHeight();
    },
 
    setStyles : function() {
      var requiredStyles = "<style>" +
      ".jp-invisible { visibility: hidden !important; } " +
      ".jp-hidden { display: none !important; }" +
      "</style>";
 
      $(requiredStyles).appendTo("head");
 
      if (this._cssAnimSupport && this.options.animation.length)
        this._items.addClass("animated jp-hidden");
      else this._items.hide();
 
    },
 
    setNav : function() {
      var navhtml = this.writeNav();
 
      this._holder.each(this.bind(function(index, element) {
        var holder = $(element);
        holder.html(navhtml);
        this.cacheNavElements(holder, index);
        this.bindNavHandlers(index);
        this.disableNavSelection(element);
      }, this));
 
      if (this.options.keyBrowse) this.bindNavKeyBrowse();
      if (this.options.scrollBrowse) this.bindNavScrollBrowse();
    },
 
    writeNav : function() {
      var i = 1, navhtml;
      navhtml = this.writeBtn("first") + this.writeBtn("previous");
 
      for (; i <= this._numPages; i++) {
        if (i === 1 && this.options.startRange === 0) navhtml += "<span>...</span>";
        if (i > this.options.startRange && i <= this._numPages - this.options.endRange)
          navhtml += "<a href='#' class='jp-hidden'>";
        else
          navhtml += "<a>";
 
        switch (this.options.links) {
          case "numeric":
            navhtml += i;
            break;
          case "blank":
            break;
          case "title":
            var title = this._items.eq(i - 1).attr("data-title");
            navhtml += title !== undefined ? title : "";
            break;
        }
 
        navhtml += "</a>";
        if (i === this.options.startRange || i === this._numPages - this.options.endRange)
          navhtml += "<span>...</span>";
      }
      navhtml += this.writeBtn("next") + this.writeBtn("last") + "</div>";
      return navhtml;
    },
 
    writeBtn : function(which) {
 
      return this.options[which] !== false && !$(this["_" + which]).length ?
      "<a class='jp-" + which + "'>" + this.options[which] + "</a>" : "";
 
    },
 
    cacheNavElements : function(holder, index) {
      this._nav[index] = {};
      this._nav[index].holder = holder;
      this._nav[index].first = this._first.length ? this._first : this._nav[index].holder.find("a.jp-first");
      this._nav[index].previous = this._previous.length ? this._previous : this._nav[index].holder.find("a.jp-previous");
      this._nav[index].next = this._next.length ? this._next : this._nav[index].holder.find("a.jp-next");
      this._nav[index].last = this._last.length ? this._last : this._nav[index].holder.find("a.jp-last");
      this._nav[index].fstBreak = this._nav[index].holder.find("span:first");
      this._nav[index].lstBreak = this._nav[index].holder.find("span:last");
      this._nav[index].pages = this._nav[index].holder.find("a").not(".jp-first, .jp-previous, .jp-next, .jp-last");
      this._nav[index].permPages =
        this._nav[index].pages.slice(0, this.options.startRange)
          .add(this._nav[index].pages.slice(this._numPages - this.options.endRange, this._numPages));
      this._nav[index].pagesShowing = $([]);
      this._nav[index].currentPage = $([]);
    },
 
    bindNavHandlers : function(index) {
      var nav = this._nav[index];
 
      // default nav
      nav.holder.bind("click.jPages", this.bind(function(evt) {
        var newPage = this.getNewPage(nav, $(evt.target));
        if (this.validNewPage(newPage)) {
          this._clicked = true;
          this.paginate(newPage);
        }
        evt.preventDefault();
      }, this));
 
      // custom first
      if (this._first.length) {
        this._first.bind("click.jPages", this.bind(function() {
          if (this.validNewPage(1)) {
            this._clicked = true;
            this.paginate(1);
          }
        }, this));
      }
 
      // custom previous
      if (this._previous.length) {
        this._previous.bind("click.jPages", this.bind(function() {
          var newPage = this._currentPageNum - 1;
          if (this.validNewPage(newPage)) {
            this._clicked = true;
            this.paginate(newPage);
          }
        }, this));
      }
 
      // custom next
      if (this._next.length) {
        this._next.bind("click.jPages", this.bind(function() {
          var newPage = this._currentPageNum + 1;
          if (this.validNewPage(newPage)) {
            this._clicked = true;
            this.paginate(newPage);
          }
        }, this));
      }
 
      // custom last
      if (this._last.length) {
        this._last.bind("click.jPages", this.bind(function() {
          if (this.validNewPage(this._numPages)) {
            this._clicked = true;
            this.paginate(this._numPages);
          }
        }, this));
      }
 
    },
 
    disableNavSelection : function(element) {
      if (typeof element.onselectstart != "undefined")
        element.onselectstart = function() {
          return false;
        };
      else if (typeof element.style.MozUserSelect != "undefined")
        element.style.MozUserSelect = "none";
      else
        element.onmousedown = function() {
          return false;
        };
    },
 
    bindNavKeyBrowse : function() {
      this.jQdocument.bind("keydown.jPages", this.bind(function(evt) {
        var target = evt.target.nodeName.toLowerCase();
        if (this.elemScrolledIntoView() && target !== "input" && target != "textarea") {
          var newPage = this._currentPageNum;
 
          if (evt.which == 37) newPage = this._currentPageNum - 1;
          if (evt.which == 39) newPage = this._currentPageNum + 1;
 
          if (this.validNewPage(newPage)) {
            this._clicked = true;
            this.paginate(newPage);
          }
        }
      }, this));
    },
 
    elemScrolledIntoView : function() {
      var docViewTop, docViewBottom, elemTop, elemBottom;
      docViewTop = this.jQwindow.scrollTop();
      docViewBottom = docViewTop + this.jQwindow.height();
      elemTop = this._container.offset().top;
      elemBottom = elemTop + this._container.height();
      return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
 
      // comment above and uncomment below if you want keyBrowse to happen
      // only when container is completely visible in the page
      /*return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) &&
                (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );*/
    },
 
    bindNavScrollBrowse : function() {
      this._container.bind("mousewheel.jPages DOMMouseScroll.jPages", this.bind(function(evt) {
        var newPage = (evt.originalEvent.wheelDelta || -evt.originalEvent.detail) > 0 ?
        (this._currentPageNum - 1) : (this._currentPageNum + 1);
        if (this.validNewPage(newPage)) {
          this._clicked = true;
          this.paginate(newPage);
        }
        evt.preventDefault();
        return false;
      }, this));
    },
 
    getNewPage : function(nav, target) {
      if (target.is(nav.currentPage)) return this._currentPageNum;
      if (target.is(nav.pages)) return nav.pages.index(target) + 1;
      if (target.is(nav.first)) return 1;
      if (target.is(nav.last)) return this._numPages;
      if (target.is(nav.previous)) return nav.pages.index(nav.currentPage);
      if (target.is(nav.next)) return nav.pages.index(nav.currentPage) + 2;
    },
 
    validNewPage : function(newPage) {
      return newPage !== this._currentPageNum && newPage > 0 && newPage <= this._numPages;
    },
 
    paginate : function(page) {
      var itemRange, pageInterval;
      itemRange = this.updateItems(page);
      pageInterval = this.updatePages(page);
      this._currentPageNum = page;
      if ($.isFunction(this.options.callback))
        this.callback(page, itemRange, pageInterval);
 
      this.updatePause();
    },
 
    updateItems : function(page) {
      var range = this.getItemRange(page);
      this._itemsHiding = this._itemsShowing;
      this._itemsShowing = this._items.slice(range.start, range.end);
      if (this._cssAnimSupport && this.options.animation.length) this.cssAnimations(page);
      else this.jQAnimations(page);
      return range;
    },
 
    getItemRange : function(page) {
      var range = {};
      range.start = (page - 1) * this.options.perPage;
      range.end = range.start + this.options.perPage;
      if (range.end > this._items.length) range.end = this._items.length;
      return range;
    },
 
    cssAnimations : function(page) {
      clearInterval(this._delay);
 
      this._itemsHiding
        .removeClass(this.options.animation + " jp-invisible")
        .addClass("jp-hidden");
 
      this._itemsShowing
        .removeClass("jp-hidden")
        .addClass("jp-invisible");
 
      this._itemsOriented = this.getDirectedItems(page);
      this._index = 0;
 
      this._delay = setInterval(this.bind(function() {
        if (this._index === this._itemsOriented.length) clearInterval(this._delay);
        else {
          this._itemsOriented
          .eq(this._index)
          .removeClass("jp-invisible")
          .addClass(this.options.animation);
        }
        this._index = this._index + 1;
      }, this), this.options.delay);
    },
 
    jQAnimations : function(page) {
      clearInterval(this._delay);
      this._itemsHiding.addClass("jp-hidden");
      this._itemsShowing.fadeTo(0, 0).removeClass("jp-hidden");
      this._itemsOriented = this.getDirectedItems(page);
      this._index = 0;
      this._delay = setInterval(this.bind(function() {
        if (this._index === this._itemsOriented.length) clearInterval(this._delay);
        else {
          this._itemsOriented
          .eq(this._index)
          .fadeTo(this.options.fallback, 1);
        }
        this._index = this._index + 1;
      }, this), this.options.delay);
    },
 
    getDirectedItems : function(page) {
      var itemsToShow;
 
      switch (this.options.direction) {
        case "backwards":
          itemsToShow = $(this._itemsShowing.get().reverse());
          break;
        case "random":
          itemsToShow = $(this._itemsShowing.get().sort(function() {
            return (Math.round(Math.random()) - 0.5);
          }));
          break;
        case "auto":
          itemsToShow = page >= this._currentPageNum ?
          this._itemsShowing : $(this._itemsShowing.get().reverse());
          break;
        default:
          itemsToShow = this._itemsShowing;
      }
 
      return itemsToShow;
    },
 
    updatePages : function(page) {
      var interval, index, nav;
      interval = this.getInterval(page);
      for (index in this._nav) {
        if (this._nav.hasOwnProperty(index)) {
          nav = this._nav[index];
          this.updateBtns(nav, page);
          this.updateCurrentPage(nav, page);
          this.updatePagesShowing(nav, interval);
          this.updateBreaks(nav, interval);
        }
      }
      return interval;
    },
 
    getInterval : function(page) {
      var neHalf, upperLimit, start, end;
      neHalf = Math.ceil(this.options.midRange / 2);
      upperLimit = this._numPages - this.options.midRange;
      start = page > neHalf ? Math.max(Math.min(page - neHalf, upperLimit), 0) : 0;
      end = page > neHalf ?
        Math.min(page + neHalf - (this.options.midRange % 2 > 0 ? 1 : 0), this._numPages) :
        Math.min(this.options.midRange, this._numPages);
      return {start: start,end: end};
    },
 
    updateBtns : function(nav, page) {
      if (page === 1) {
        nav.first.addClass("jp-disabled");
        nav.previous.addClass("jp-disabled");
      }
      if (page === this._numPages) {
        nav.next.addClass("jp-disabled");
        nav.last.addClass("jp-disabled");
      }
      if (this._currentPageNum === 1 && page > 1) {
        nav.first.removeClass("jp-disabled");
        nav.previous.removeClass("jp-disabled");
      }
      if (this._currentPageNum === this._numPages && page < this._numPages) {
        nav.next.removeClass("jp-disabled");
        nav.last.removeClass("jp-disabled");
      }
    },
 
    updateCurrentPage : function(nav, page) {
      nav.currentPage.removeClass("jp-current");
      nav.currentPage = nav.pages.eq(page - 1).addClass("jp-current");
    },
 
    updatePagesShowing : function(nav, interval) {
      var newRange = nav.pages.slice(interval.start, interval.end).not(nav.permPages);
      nav.pagesShowing.not(newRange).addClass("jp-hidden");
      newRange.not(nav.pagesShowing).removeClass("jp-hidden");
      nav.pagesShowing = newRange;
    },
 
    updateBreaks : function(nav, interval) {
      if (
        interval.start > this.options.startRange ||
        (this.options.startRange === 0 && interval.start > 0)
      ) nav.fstBreak.removeClass("jp-hidden");
      else nav.fstBreak.addClass("jp-hidden");
 
      if (interval.end < this._numPages - this.options.endRange) nav.lstBreak.removeClass("jp-hidden");
      else nav.lstBreak.addClass("jp-hidden");
    },
 
    callback : function(page, itemRange, pageInterval) {
      var pages = {
            current: page,
            interval: pageInterval,
            count: this._numPages
          },
          items = {
            showing: this._itemsShowing,
            oncoming: this._items.slice(itemRange.start + this.options.perPage, itemRange.end + this.options.perPage),
            range: itemRange,
            count: this._items.length
          };
 
      pages.interval.start = pages.interval.start + 1;
      items.range.start = items.range.start + 1;
      this.options.callback(pages, items);
    },
 
    updatePause : function() {
      if (this.options.pause && this._numPages > 1) {
        clearTimeout(this._pause);
        if (this.options.clickStop && this._clicked) return;
        else {
          this._pause = setTimeout(this.bind(function() {
            this.paginate(this._currentPageNum !== this._numPages ? this._currentPageNum + 1 : 1);
          }, this), this.options.pause);
        }
      }
    },
 
    setMinHeight : function() {
      if (this.options.minHeight && !this._container.is("table, tbody")) {
        setTimeout(this.bind(function() {
          this._container.css({ "min-height": this._container.css("height") });
        }, this), 1000);
      }
    },
 
    bind : function(fn, me) {
      return function() {
        return fn.apply(me, arguments);
      };
    },
 
    destroy : function() {
      this.jQdocument.unbind("keydown.jPages");
      this._container.unbind("mousewheel.jPages DOMMouseScroll.jPages");
 
      if (this.options.minHeight) this._container.css("min-height", "");
      if (this._cssAnimSupport && this.options.animation.length)
        this._items.removeClass("animated jp-hidden jp-invisible " + this.options.animation);
      else this._items.removeClass("jp-hidden").fadeTo(0, 1);
      this._holder.unbind("click.jPages").empty();
    }
 
  };
 
  $.fn[name] = function(arg) {
    var type = $.type(arg);
 
    if (type === "object") {
      if (this.length && !$.data(this, name)) {
        instance = new Plugin(this, arg);
        this.each(function() {
          $.data(this, name, instance);
        });
      }
      return this;
    }
 
    if (type === "string" && arg === "destroy") {
      instance.destroy();
      this.each(function() {
        $.removeData(this, name);
      });
      return this;
    }
 
    if (type === 'number' && arg % 1 === 0) {
      if (instance.validNewPage(arg)) instance.paginate(arg);
      return this;
    }
 
    return this;
  };
 
})(jQuery, window, document);

angelorubin · Abril 22, 2014

Não testei, mas tenta modificar isto:

midRange     : 5,

por isto:

midRange     : 11,

Felipe Prudêncio · Abril 23, 2014

Fiz isto mas não mostrou nenhum resultado.

angelorubin · Abril 26, 2014

Não tem segredo, no site do desenvolvedor explica bem detalhadinho - http://luis-almeida.github.io/jPages

É só alterar essa linha:

perPage      : 11, // quantidade de imagens por pagina

Veja um exemplo aqui - http://angelorubin.besaba.com/Imasters/Js/paginacao-jquery.php

Entrar

Arquivado

Paginaçao com JQuery

Recommended Posts

Felipe Prudêncio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Felipe Prudêncio 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

angelorubin 142

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Soma dos dias utilizados

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante