# widget.pager.js

- Jump To … +
  backend.dataproxy.js backend.memory.js ecma-fixes.js model.js view.flot.js view.graph.js view.grid.js view.map.js view.multiview.js view.slickgrid.js view.timeline.js widget.facetviewer.js widget.fields.js widget.filtereditor.js widget.pager.js widget.queryeditor.js widget.valuefilter.js

- # widget.pager.js

- ¶

      /*jshint multistr:true */

      this.recline = this.recline || {};
      this.recline.View = this.recline.View || {};

      (function($, my) {
        "use strict";

      my.Pager = Backbone.View.extend({
        className: 'recline-pager',
        template: ' \
          <div class="pagination"> \
            <ul class="pagination"> \
              <li class="prev action-pagination-update"><a href="" class="btn btn-default">&laquo;</a></li> \
              <li class="page-range"><a><label for="from">From</label><input id="from" name="from" type="text" value="{{from}}" /> &ndash; <label for="to">To</label><input id="to" name="to" type="text" value="{{to}}" /> </a></li> \
              <li class="next action-pagination-update"><a href="" class="btn btn-default">&raquo;</a></li> \
            </ul> \
          </div> \
        ',

        events: {
          'click .action-pagination-update': 'onPaginationUpdate',
          'change input': 'onFormSubmit'
        },

        initialize: function() {
          _.bindAll(this, 'render');
          this.listenTo(this.model.queryState, 'change', this.render);
          this.render();
        },
        onFormSubmit: function(e) {
          e.preventDefault();

- ¶

  filter is 0-based; form is 1-based

          var formFrom = parseInt(this.$el.find('input[name="from"]').val())-1;
          var formTo = parseInt(this.$el.find('input[name="to"]').val())-1;
          var maxRecord = this.model.recordCount-1;
          if (this.model.queryState.get('from') != formFrom) { // changed from; update from
            this.model.queryState.set({from: Math.min(maxRecord, Math.max(formFrom, 0))});
          } else if (this.model.queryState.get('to') != formTo) { // change to; update size
            var to = Math.min(maxRecord, Math.max(formTo, 0));
            this.model.queryState.set({size: Math.min(maxRecord+1, Math.max(to-formFrom+1, 1))});
          }
        },
        onPaginationUpdate: function(e) {
          e.preventDefault();
          var $el = $(e.target);
          var newFrom = 0;
          var currFrom = this.model.queryState.get('from');
          var size = this.model.queryState.get('size');
          var updateQuery = false;
          if ($el.parent().hasClass('prev')) {
            newFrom = Math.max(currFrom - Math.max(0, size), 0);
            updateQuery = newFrom != currFrom;
          } else {
            newFrom = Math.max(currFrom + size, 0);
            updateQuery = (newFrom < this.model.recordCount);
          }
          if (updateQuery) {
            this.model.queryState.set({from: newFrom});
          }
        },
        render: function() {
          var tmplData = this.model.toJSON();
          var from = parseInt(this.model.queryState.get('from'));
          tmplData.from = from+1;
          tmplData.to = Math.min(from+this.model.queryState.get('size'), this.model.recordCount);
          var templated = Mustache.render(this.template, tmplData);
          this.$el.html(templated);
          return this;
        }
      });

      })(jQuery, recline.View);