Альтернативы нумерации страниц

Question

Я ищу идеи для альтернативы нумерации страниц. Мне известны 2 схемы нумерации страниц:

• Нажмите на страницы нумерации страниц - мой любимый пример
• Бесконечная нумерация прокрутки - одна реализация здесь , которая, кажется, работает

Должны быть другие, менее известные / популярные способы сделать это. Бонусные баллы, если вы можете предоставить ссылку на демо

Спасибо

Answer 1

Я думаю, что хорошая альтернатива пейджингу - это способ или несколько способов, чтобы пользователь мог рассказать серверу о том, что он ищет. Для некоторых типов контента (например, большого количества текста, скажем, из исследовательской работы или художественного произведения), конечно, вы, вероятно, застряли с подкачкой страниц. Но когда контент естественно доступен для поиска (например, таблицы проверки транзакций по счетам), хорошие, простые инструменты фильтрации, вероятно, более полезны, чем схемы разбиения на страницы. (На самом деле вам могут понадобиться оба.)

Answer 2

Взгляните на «логарифмическую» нумерацию страниц, как описано в моем ответе здесь:

Как сделать навигацию по страницам для многих, многих страниц? Логарифмическая навигация по страницам

Это похоже на обычное разбиение на страницы, но решает проблему перехода на страницы в середине диапазона «...» без многократных щелчков мышью. т.е. сколько времени потребуется, чтобы перейти на страницу 2456 из 10380, если это ваши ссылки: 1 2 3 4 5 ... 10376 10377 10378 10379 10380?

(Но у Пойнти есть, хм ... точка тоже (!))

Answer 3

Я работал над гибридной техникой GWT , где она выполняла «бесконечный свиток», но показывала только «окно / страницу» информации за раз. Таким образом, он загружал только фиксированный объем данных в браузер в любой момент времени. Если бы вы могли отобразить 20 элементов и прокрутить их, просто обновите список по 20 элементов за раз. Пейджинг без пейджинга, прокрутка без прокрутки.

Конечно, это тривиальное определение фактической реализации, которое было намного умнее, чем звучит, и очень оптимизировано для поездок в оба конца. И это был список результатов, которые уже были отфильтрованы по критериям поиска. Они идут рука об руку.

Answer 4

Здесь есть классное решение для логарифмической пагинации:

http://jobcloud.cz/glPagiSmart.jc

Но я не уверен, сколько людей действительно захотят использовать шестнадцатеричные или двоичные реализации:)

Answer 5

Вот код для чистого управления разбиением на страницы JavaScript, которое я недавно построил. Это похоже на ваш любимый с этими дополнительными преимуществами ...

• Нажатие ... позволяет быстро перейти на любую страницу
• Отсутствие слов означает отсутствие локализации (кнопки Next, prev, first, last не являются нужен в этом простом управлении)
• Нет зависимостей (jQuery не требуется)

var Pagination = {
  code: '',

  Extend: function(data) {
    data = data || {};
    Pagination.size = data.size || 300;
    Pagination.page = data.page || 1;
    Pagination.step = data.step || 3;
  },

  Add: function(s, f) {
    for (var i = s; i < f; i++) {
      Pagination.code += '<a>' + i + '</a>';
    }
  },

  Last: function() {
    Pagination.code += '<i>...</i><a>' + Pagination.size + '</a>';
  },

  First: function() {
    Pagination.code += '<a>1</a><i>...</i>';
  },


  Click: function() {
    Pagination.page = +this.innerHTML;
    Pagination.Start();
  },

  Prev: function() {
    Pagination.page--;
    if (Pagination.page < 1) {
      Pagination.page = 1;
    }
    Pagination.Start();
  },

  Next: function() {
    Pagination.page++;
    if (Pagination.page > Pagination.size) {
      Pagination.page = Pagination.size;
    }
    Pagination.Start();
  },

  TypePage: function() {
    Pagination.code = '<input onclick="this.setSelectionRange(0, this.value.length);this.focus();" onkeypress="if (event.keyCode == 13) { this.blur(); }" value="' + Pagination.page + '" /> &nbsp; / &nbsp; ' + Pagination.size;
    Pagination.Finish();
    var v = Pagination.e.getElementsByTagName('input')[0];
    v.click();
    v.addEventListener("blur", function(event) {

      var p = parseInt(this.value);

      if (!isNaN(parseFloat(p)) && isFinite(p)) {
        if (p > Pagination.size) {
          p = Pagination.size;
        } else if (p < 1) {
          p = 1;
        }
      } else {
        p = Pagination.page;
      }

      Pagination.Init(document.getElementById('pagination'), {
        size: Pagination.size,
        page: p,
        step: Pagination.step
      });
    }, false);
  },


  Bind: function() {
    var a = Pagination.e.getElementsByTagName('a');
    for (var i = 0; i < a.length; i++) {
      if (+a[i].innerHTML === Pagination.page) a[i].className = 'current';
      a[i].addEventListener('click', Pagination.Click, false);
    }
    var d = Pagination.e.getElementsByTagName('i');
    for (i = 0; i < d.length; i++) {
      d[i].addEventListener('click', Pagination.TypePage, false);
    }
  },

  Finish: function() {
    Pagination.e.innerHTML = Pagination.code;
    Pagination.code = '';
    Pagination.Bind();
  },

  Start: function() {
    if (Pagination.size < Pagination.step * 2 + 6) {
      Pagination.Add(1, Pagination.size + 1);
    } else if (Pagination.page < Pagination.step * 2 + 1) {
      Pagination.Add(1, Pagination.step * 2 + 4);
      Pagination.Last();
    } else if (Pagination.page > Pagination.size - Pagination.step * 2) {
      Pagination.First();
      Pagination.Add(Pagination.size - Pagination.step * 2 - 2, Pagination.size + 1);
    } else {
      Pagination.First();
      Pagination.Add(Pagination.page - Pagination.step, Pagination.page + Pagination.step + 1);
      Pagination.Last();
    }
    Pagination.Finish();
  },


  Buttons: function(e) {
    var nav = e.getElementsByTagName('a');
    nav[0].addEventListener('click', Pagination.Prev, false);
    nav[1].addEventListener('click', Pagination.Next, false);
  },

  Create: function(e) {
    var html = [
      '<a>&#9668;</a>', // previous button
      '<span></span>', // pagination container
      '<a>&#9658;</a>' // next button
    ];
    e.innerHTML = html.join('');
    Pagination.e = e.getElementsByTagName('span')[0];
    Pagination.Buttons(e);
  },

  Init: function(e, data) {
    Pagination.Extend(data);
    Pagination.Create(e);
    Pagination.Start();
  }
};

var init = function() {
  Pagination.Init(document.getElementById('pagination'), {
    size: 30, // pages size
    page: 1, // selected page
    step: 2 // pages before and after current
  });
};

document.addEventListener('DOMContentLoaded', init, false);

html {
  height: 100%;
  width: 100%;
  background-color: #ffffff;
}
body {
  margin: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  font-family: Arial, sans-serif;
}
body:before {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
#pagination {
  display: inline-block;
  vertical-align: middle;
  padding: 1px 2px 4px 2px;
  font-size: 12px;
  color: #7D7D7D;
}
#pagination a,
#pagination i {
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  color: #7D7D7D;
  text-align: center;
  padding: 4px 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
#pagination a {
  margin: 0 2px 0 2px;
  cursor: pointer;
}
#pagination a:hover {
  background-color: #999;
  color: #fff;
}
#pagination i {
  border: 2px solid transparent;
  cursor: pointer;
}
#pagination i:hover {
  border: 2px solid #999;
  cursor: pointer;
}
#pagination input {
  width: 40px;
  padding: 2px 4px;
  color: #7D7D7D;
  text-align: right;
}
#pagination a.current {
  border: 1px solid #E9E9E9;
  background-color: #666;
  color: #fff;
}

<div id="pagination"></div>