Подтвердить что ты не робот

Альтернативы разбивки на страницы

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

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

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

Спасибо

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

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

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

(Но, Pointy имеет, uhm... точку также (!))

Ответ 4

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

Щелчок по... позволяет быстро перейти на любую страницу
Никакие слова не означают никакой локализации (следующие, предыдущие, первые, последние кнопки не необходимо в этом простом управлении)
Нет зависимостей (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>

Ответ 5

Здесь есть крутое логарифмическое решение для разбивки на страницы:

http://jobcloud.cz/glPagiSmart.jc

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