Backgrid pagination extension, similar to original extension but without getting stuck in the footer

backgrid-pagination.js

/**
 *
 * var pagination = new Backgrid.Extension.Pagination({
 *   collection: pageableCollection
 *  })
 *
 * $("#pagination").append(pagination.render().el);
 *
 */
(function ($, _, Backbone, Backgrid) {

  'use strict';

  Backgrid.Extension.Pagination = Backbone.View.extend({

    tagName: 'ul',
    listedPages: 10,

    template: _.template('<% _.each(handlers, function (handle) { %><li <% if (handle.className) { %>class="<%= handle.className %>"<% } %>><a href="#" <% if (handle.title) {%> title="<%= handle.title %>"<% } %>><%= handle.label %></a>\</li><% }); %>'),

    fastForwardHandleLabels: {
      first: '«« ',
      prev: '«',
      next: '»',
      last: ' »»'
    },

    events: {
      'click a': 'move',
    },

    initialize: function (options) {
      var collection = this.collection.fullCollection || this.collection;
      this.listenTo(collection, 'add', this.render);
      this.listenTo(collection, 'remove', this.render);
      this.listenTo(collection, 'reset', this.render);
    },

    move: function (e) {
      var label = $(e.target).text();
      var collection = this.collection;
      var state = collection.state;
      var pageIndex = $(e.target).text() * 1;
      var ffLabels = this.fastForwardHandleLabels;

      if (ffLabels) {
        switch (label) {
        case ffLabels.first:
          collection.getFirstPage();
          return;
        case ffLabels.prev:
          if (collection.hasPrevious()) collection.getPreviousPage();
          return;
        case ffLabels.next:
          if (collection.hasNext()) collection.getNextPage();
          return;
        case ffLabels.last:
          collection.getLastPage();
          return;
        }
      }

      collection.getPage(state.firstPage === 0 ? pageIndex - 1 : pageIndex);
    },

    createList: function () {

      var handlers = [];
      var collection = this.collection;
      var state = collection.state;

      var lastPage = state.lastPage ? state.lastPage : state.firstPage;
      lastPage = state.firstPage === 0 ? lastPage : lastPage - 1;
      var currentPage = state.firstPage === 0 ? state.currentPage : state.currentPage - 1;
      var listStart = Math.floor(currentPage / this.listedPages) * this.listedPages;
      var listEnd = listStart + this.listedPages;
      listEnd = listEnd <= lastPage ? listEnd : lastPage + 1;

      if (collection.mode !== 'infinite') {
        for (var i = listStart; i < listEnd; i++) {
          handlers.push({
            label: i + 1,
            className: currentPage === i ? 'active' : undefined
          });
        }
      }

      var ffLabels = this.fastForwardHandleLabels;
      if (ffLabels) {

        if (ffLabels.prev) {
          handlers.unshift({
            label: ffLabels.prev,
            className: collection.hasPrevious() ? void 0 : 'disabled'
          });
        }

        if (ffLabels.first) {
          handlers.unshift({
            label: ffLabels.first,
            className: collection.hasPrevious() ? void 0 : 'disabled'
          });
        }

        if (ffLabels.next) {
          handlers.push({
            label: ffLabels.next,
            className: collection.hasNext() ? void 0 : 'disabled'
          });
        }

        if (ffLabels.last) {
          handlers.push({
            label: ffLabels.last,
            className: collection.hasNext() ? void 0 : 'disabled'
          });
        }
      }


      return handlers;
    },

    render: function () {

      this.$el.empty();

      this.$el.append($(this.template({
        handlers: this.createList()
      })));

      this.delegateEvents();

      return this;
    }

  });

}(jQuery, _, Backbone, Backgrid));