Какое самое элегантное решение для гармошки / "показать больше >>"?

Question

Я ищу здесь общую мудрость.

Я ищу элегантно простой способ ограничить количество строк в таблице, представленных на странице, с помощью «просмотреть все >>», чтобы получить всю таблицу, представленную в представлении. Я рассмотрел все следующее ... некоторые в комбинации:

1. две разные части, одна из которых отображает ограниченное количество строк со ссылкой «просмотреть все >>» внизу, а вторая - со списком со ссылкой «свернуть >>» внизу.
2. с использованием jQuery
3. css решение
4. 1012 * Аякс *

Любые ссылки и / или фрагменты могут быть полезны в дополнение к вашему обоснованию выбора одного из другого. Я бы предпочел минимизировать запросы к серверу / базе данных, не создавая объемный кодирующий памятник изобретательности программиста (меня): =]

Спасибо!

ОБНОВЛЕНИЕ: посмотрите здесь , чтобы увидеть код, написанный до того, как он может быть адаптирован. Большое спасибо Нилу за ресурс jsfiddle.net.

Answer 1

Отличным решением для больших столов является Grid.Моя сетка выбора - DataTables

Сетки решают множество проблем: сортировка, разбиение по страницам, фильтрация, загрузка ajax и отображение / скрытие результатов.Вероятно, вы говорите только об ограничивающей части уравнения, но я бы сказал, что ВСЕ функции имеют значение в интерфейсах, поэтому на них стоит обратить внимание.

Настроить его легкои у вас есть три варианта данных:

1. Создайте правильную таблицу HTML с тегами <thead> и <tbody>.Сетка интерпретирует DOM и стили соответственно.
2. Укажите допустимую строку JSON с табличными данными.DataTables создает HTML для вас.
3. Предоставьте JSON через AJAX.Это также позволяет вам «конвейеризовать» данные для поиска данных вперед и позади желаемого.

Datatables управляется JQuery, поэтому вам нужно будет включить Jquery и код DataTables.Есть также немного CSS, чтобы сделать вещи "красивыми". Вот и все .... довольно легко.Как только вы освоите его, создание нового DataTable с нуля займет 2-3 минуты.Учитывая функциональность, это минимальные инвестиции в ваш пользовательский интерфейс.

Что касается производительности, у меня есть DataTable, обрабатывающий 2,5 миллиона записей в обязательном порядке.В нем используется конвейерная обработка JSON, разбиение по страницам, сортировка и фильтрация (и хорошо проиндексированная БД MySQL) для поддержания приемлемой производительности.