Pagination issue

[ghost]

Hi,

I have really big data to be send to the datagrid and I display them per 50 in each page. My problem is that I have "<< 1 2 3 ... 40 >>" and this is taking more than a line and getting ugly on my page.

Do you already have a solution to have "<< ... 25 26 ... >>" instead for example or any idea about how doing it ?

Thank you

[loicfrering]

Hi, this is indeed a known problem, I am working for the next version on alternative pagination controls. Right now you can override Backbone.Datagrid.Pagination view or Backbone.Datagrid.prototype.renderPagination.

Thanks for reporting.

[Filirom1]

Thank you for the explanation.

It's quite simple to only keeps the arrows :

  Backbone.Datagrid.Pagination.prototype.render = function(){
    var $ul = $('<ul></ul>'), $li;

    $li = $('<li class="prev"><a href="#">«</a></li>');
    if (!this.pager.hasPrev()) {
      $li.addClass('disabled');
    }
    $ul.append($li);

    $li = $('<li class="next"><a href="#">»</a></li>');
    if (!this.pager.hasNext()) {
      $li.addClass('disabled');
    }
    $ul.append($li);

    this.$el.append($ul);
    return this;
  };

[tikal]

I needed a sort of truncated pager, here is a rough render function that does not fully display the pager by adding some disabled ... cases. The pager is "truncated" only if the truncated parameter is set to true. Else the rendering is full.

render: function() {
    var $ul = $('<ul></ul>'), $li;

    $li = $('<li class="prev"><a href="#">«</a></li>');
    if (!this.pager.hasPrev()) {
      $li.addClass('disabled');
    }
    $ul.append($li);

    if(this.pager.get('truncated')) {
        var previousIsHidden = false;
    }
    if (this.pager.hasTotal()) {
      for (var i = 1; i <= this.pager.get('totalPages'); i++) {
        $li = $('<li></li>');
        var current = this.pager.get('currentPage');
        if (i === current) {
          $li.addClass('active');
        }

        if(this.pager.get('truncated')) {
            var max = this.pager.get('totalPages');
            if(i == 1 || i == 2 || i == max || i == max - 1 || i == current 
                    || i == current - 1 || i == current -2 || i == current + 1 || i == current + 2) {
                $li.append('<a href="#">' + i + '</a>');
                $ul.append($li);
                previousIsHidden = false;
            }
            else {
                if(!previousIsHidden) {
                    $li.append('<a href="#">...</a>');
                    $li.addClass('disabled');
                    $ul.append($li);
                    previousIsHidden = true;
                }
            }
        }
        else {
            $li.append('<a href="#">' + i + '</a>');
            $ul.append($li);
        }
      }
    }

    $li = $('<li class="next"><a href="#">»</a></li>');
    if (!this.pager.hasNext()) {
      $li.addClass('disabled');
    }
    $ul.append($li);

    this.$el.append($ul);
    return this;
  },