У меня есть набор данных около 1000 элементов в памяти, и я пытаюсь создать пейджер для этого набора данных, но я не уверен, как это сделать.
Я использую пользовательскую функцию фильтра для фильтрации результатов, и это прекрасно работает, но каким-то образом мне нужно получить количество страниц.
Есть какие-нибудь подсказки?
angularjs
pagination
Микаэл
источник
источник
Ответы:
Angular UI Bootstrap - Директива пагинации
Ознакомьтесь с директивой пагинации пользовательского интерфейса Bootstrap . Я закончил тем, что использовал его, а не то, что опубликовано здесь, так как у него достаточно функций для моего текущего использования и есть подробные спецификации для тестирования, чтобы сопровождать его.
Посмотреть
контроллер
Я сделал рабочий поршень для справки.
Старая версия:
Посмотреть
контроллер
Я сделал рабочий поршень для справки.
источник
pagination
элементе.Недавно я реализовал пейджинг для сайта Built with Angular. Вы можете проверить источник: https://github.com/angular/builtwith.angularjs.org
Я бы не использовал фильтр для разделения страниц. Вы должны разбить элементы на страницы внутри контроллера.
источник
Use your downvotes whenever you encounter an egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect.
Мне приходилось несколько раз реализовывать нумерацию страниц с помощью Angular, и мне всегда было немного больно от того, что я чувствовал, что можно было бы упростить. Я использовал некоторые идеи, представленные здесь и в других местах, чтобы создать модуль разбиения на страницы, который делает разбиение на страницы таким простым:
Вот и все. Он имеет следующие особенности:
items
со ссылками на нумерацию страниц.ng-repeat
, так что вы можете использовать любое выражение, которое может быть корректно использовано вng-repeat
, включая фильтрацию, упорядочение и т. Д.pagination-controls
директиве не нужно ничего знать о контексте, в которомpaginate
вызывается директива.Демо: http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview
Для тех, кто ищет решение «подключи и работай», я думаю, вы найдете это полезным.
Код
Код доступен здесь на GitHub и включает в себя довольно хороший набор тестов:
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
Если вам интересно, я также написал небольшую статью с чуть более глубоким пониманием дизайна модуля: http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/
источник
Я только что создал JSFiddle, который показывает порядок разбивки на страницы + поиск + в каждом столбце, используя код btford: http://jsfiddle.net/SAWsA/11/
источник
new_sorting_order
должно бытьnewSortingOrder
. Исправьте это, добавьте@scope.search();
, и вы увидите, что все отсортировано, как и ожидалось, и значки сортировки тоже обновятся. (Запустите скрипку с открытой консолью отладки вашего браузера (в Chrome, F12, вкладка консоли), и это очевидно).Я обновил http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview plunkr в Scotty.NET, чтобы он использовал более новые версии angular, angular-ui и bootstrap.
контроллер
Компонент интерфейса начальной загрузки
источник
Это чисто JavaScript-решение, которое я обернул как сервис Angular для реализации логики разбивки на страницы, как в результатах поиска Google.
Рабочая демонстрация на CodePen по адресу http://codepen.io/cornflourblue/pen/KVeaQL/
Подробности и объяснения в этом блоге
источник
Я извлек соответствующие биты здесь. Это табличный пейджер без излишеств, поэтому сортировка или фильтрация не включены. Не стесняйтесь изменять / добавлять по мере необходимости:
источник
Ниже решение довольно простое.
Вот пример jsfiddle
источник
В угловом адаптере jQuery Mobile есть фильтр подкачки, который вы можете использовать.
Вот демонстрационная скрипка, которая использует его (добавьте более 5 элементов, и он станет разбитым на страницы): http://jsfiddle.net/tigbro/Du2DY/
Вот источник: https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/src/main/webapp/utils/paging.js
источник
Для тех, кому трудно, как я, создать пагинатор для стола, я публикую это. Итак, на ваш взгляд:
В ваших угловых сообщениях:
источник
Я использую эту стороннюю библиотеку нумерации страниц, и она работает хорошо. Это может делать локальные / удаленные источники данных, и это очень настраивается.
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
источник
Начиная с Angular 1.4,
limitTo
фильтр также принимает второй необязательный аргументbegin
Из документов :
Таким образом, вам не нужно создавать новую директиву , этот аргумент может быть использован для установки смещения нумерации страниц
источник
Вы можете легко сделать это, используя директиву Bootstrap UI.
Этот ответ является модификацией ответа, данного @ Scotty.NET, я изменил код, потому что
<pagination>
директива устарела.Следующий код генерирует нумерацию страниц:
Чтобы сделать это функциональным, используйте это в вашем контроллере:
Обращайтесь к этому, чтобы узнать больше о параметрах нумерации страниц: Директива Bootstrap UI Pagination
источник
нг-повторная нумерация страниц
источник
Предыдущие сообщения в основном рекомендовали, как создать пейджинг самостоятельно. Если вы похожи на меня и предпочитаете готовую директиву, я просто нашел отличную директиву ngTable . Поддерживает сортировку, фильтрацию и разбиение на страницы.
Это очень чистое решение, все что вам нужно:
И в контроллере:
Ссылка на GitHub: https://github.com/esvit/ng-table/
источник
Радиально-пейджинга
это прекрасный выбор
источник
Старый вопрос, но, поскольку я думаю, что мой подход немного другой и менее сложный, я поделюсь этим и надеюсь, что кто-то кроме меня найдет его полезным.
То, что я нашел простым и небольшим решением для нумерации страниц, - это объединить директиву с фильтром, который использует те же переменные области видимости.
Для реализации этого вы добавляете фильтр в массив и добавляете директиву вот так
p_Size и p_Step являются переменными области действия, которые можно настраивать в области действия, иначе значение по умолчанию для p_Size равно 5, а значение p_Step равно 1.
Когда шаг изменяется в разбивке на страницы, p_Step обновляется и запускает новую фильтрацию фильтром cust_pagination. Затем фильтр cust_pagination разрезает массив в зависимости от значения p_Step, как показано ниже, и возвращает только активные записи, выбранные в разделе разбиения на страницы.
ДЕМО Посмотреть полное решение в этом поршне
источник
Вот мой пример. Выбранная кнопка посередине в списке контроллеров. конфиг >>>
Логика для нумерации страниц:
и мой взгляд на бутстап
Это полезно
источник
Я хотел бы прокомментировать, но я просто должен оставить это здесь:
Ответ Scotty.NET и повтор user2176745 для более поздних версий великолепны, но оба они упускают то, что ломает моя версия AngularJS (v1.3.15):
я не определен в $ scope.makeTodos.
Таким образом, замена этой функцией исправляет ее для более поздних угловых версий.
источник
источник
Я хотел бы добавить свое решение, которое работает с
ngRepeat
фильтрами, которые вы используете с ним, без использования$watch
массива или среза.Результаты вашего фильтра будут разбиты на страницы!
В HTML убедитесь, что вы применяете свои фильтры к фильтру
ngRepeat
перед разбиением на страницы.источник