Is it possible to support external pager template?

[chenghsuan]

Hi there,
I found external pager will auto hide prev-page and last-page when I at first page and last page, and it also hidden if total page is only one.
Is it possible to support external pager template in the future?
Thanks!

[jewway]

+1

[tabalinas]

Pager template sounds interesting.
Thank you for the request!

[chenghsuan]

I am trying to custom external-pager. I want {first} and {last} can be show when I watch first-page and last-page(maybe can not click but show the button). Further more, I want to make a text box to let user can navigate to which page he wants . Is it available way? Below is my code

(function (jsGrid, $, undefined) {
  var
      FIRST_PAGE_PLACEHOLDER = "{first}",
      PAGES_PLACEHOLDER = "{pages}",
      PREV_PAGE_PLACEHOLDER = "{prev}",
      NEXT_PAGE_PLACEHOLDER = "{next}",
      LAST_PAGE_PLACEHOLDER = "{last}",
      PAGE_INDEX_PLACEHOLDER = "{pageIndex}",
      PAGE_COUNT_PLACEHOLDER = "{pageCount}",
      ITEM_COUNT_PLACEHOLDER = "{itemCount}",
      EMPTY_HREF = "javascript:void(0);";

  var passGrid = function (config) {
    jsGrid.Grid.call(this, config);
  };
  passGrid.prototype = $.extend(jsGrid.Grid.prototype, {
    _createPagerContainer: function () {
      var pagerContainer = this.pagerContainer || $("<div>").appendTo(this._container);
      return $(pagerContainer).addClass(this.pagerContainerClass);
    },
    _refreshPager: function () {
      var $pagerContainer = this._pagerContainer;
      $pagerContainer.empty();

      if (this.paging) {
        $pagerContainer.show()
            .append(this._createPager());
      } else {
        $pagerContainer.hide();
      }
    },
    _createPages: function () {
      var pageCount = this._pagesCount(),
          pageButtonCount = this.pageButtonCount,
          firstDisplayingPage = this._firstDisplayingPage,
          pages = [],
          pageNumber;

      if (firstDisplayingPage > 1) {
        pages.push(this._createPagerPageNavButton(this.pageNavigatorPrevText, this.showPrevPages));
      }

      for (var i = 0, pageNumber = firstDisplayingPage; i < pageButtonCount && pageNumber <= pageCount; i++, pageNumber++) {
        pages.push(pageNumber === this.pageIndex
            ? this._createPagerCurrentPage()
            : this._createPagerPage(pageNumber));
      }

      if ((firstDisplayingPage + pageButtonCount - 1) < pageCount) {
        pages.push(this._createPagerPageNavButton(this.pageNavigatorNextText, this.showNextPages));
      }

      return pages;
    },
    _createPager: function () {
      var pageIndex = this.pageIndex,
          pageCount = this._pagesCount(),
          itemCount = this._itemsCount(),
          pagerParts = this.pagerFormat.split(" ");

      pagerParts = $.map(pagerParts, $.proxy(function (pagerPart) {

        var result = pagerPart;

        if (pagerPart === PAGES_PLACEHOLDER) {
          result = this._createPages();
        } else if (pagerPart === FIRST_PAGE_PLACEHOLDER) {
          result = this._createPagerNavButton(this.pageFirstText, 1);
        } else if (pagerPart === PREV_PAGE_PLACEHOLDER) {
          result = this._createPagerNavButton(this.pagePrevText, pageIndex - 1);
        } else if (pagerPart === NEXT_PAGE_PLACEHOLDER) {
          result = this._createPagerNavButton(this.pageNextText, pageIndex + 1);
        } else if (pagerPart === LAST_PAGE_PLACEHOLDER) {
          result = this._createPagerNavButton(this.pageLastText, pageCount);
        } else if (pagerPart === PAGE_INDEX_PLACEHOLDER) {
          result = pageIndex;
        } else if (pagerPart === PAGE_COUNT_PLACEHOLDER) {
          result = pageCount;
        } else if (pagerPart === ITEM_COUNT_PLACEHOLDER) {
          result = itemCount;
        }

        return $.isArray(result) ? result.concat([" "]) : [result, " "];
      }, this));
      this.pagerClass = "pagination";
      var $pager = $("<ul>").addClass(this.pagerClass)
          .append(pagerParts);

      return $pager;
    },
    _createPagerNavButton: function (text, pageIndex) {
      return this._createPagerButton(text, this.pagerNavButtonClass, function () {
        this.openPage(pageIndex);
      });
    },

    _createPagerPageNavButton: function (text, handler) {
      return this._createPagerButton(text, this.pagerNavButtonClass, handler);
    },

    _createPagerPage: function (pageIndex) {
      return this._createPagerButton(pageIndex, this.pageClass, function () {
        this.openPage(pageIndex);
      });
    },

    _createPagerButton: function (text, css, handler) {
      var $link = $("<a>").attr("href", EMPTY_HREF)
          .html(text)
          .on("click", $.proxy(handler, this));

      return $("<li>").addClass(css).append($link);
    },

    _createPagerCurrentPage: function () {
      var that = this, pagesCount = that._pagesCount(),
          pageIndex = that.pageIndex,
          $input = $('<input>').attr('type', 'text').attr('style', 'width:45%')
              .val(pageIndex)
              .on("change", function () {
              //change page number event
              }), $total = $('<label>').text('/' + pagesCount 
          );
      $span = $('<span>').attr('style', 'width: 21%;height: 18px;display: inline-block;')
          .append($input).append($total);
      return $("<li>")
          .addClass(this.pageClass)
          .addClass(this.currentPageClass).append($span);

    }
  });
  jsGrid.Grid = passGrid;
}(jsGrid, jQuery));

[tabalinas]

Do you have any issue with your solution? Or it works fine, and you just want to share your approach? Anyway, I agree your request is valuable and worth to be implemented.

[tabalinas]

Closed with:

• 4475469
• c85ae88
• 6de9c09

Now unnecessary pager nav buttons just hidden. They can be shown if necessary with css.
For completely custom pager the new option pagerRenderer was introduced. It accepts single parameter - config with the following format { pageIndex, pageCount }, and should return custom pager.

[mathursanyam97]

Hi Guys,
I want to add text box in the pagerFormat, as Chenghsuan mentioned above with image. Kindly suggest a way or provide the code snippet which could help me to solve this issue.