Блог

Главная - Вопросы по программированию - Как добиться загрузки больших данных в табличный компонент с возможностями разбивки на страницы, фильтрации и сортировки с помощью angular 6

Как добиться загрузки больших данных в табличный компонент с возможностями разбивки на страницы, фильтрации и сортировки с помощью angular 6

#angular #user-interface

#angular #пользовательский интерфейс

Вопрос:

Я разработчик-любитель angular и работаю над требованием, согласно которому мне нужно загрузить > 1 миллиона записей в таблицу с разбиением на страницы. Как я могу обрабатывать разбивку на страницы, сортировку и фильтрацию для полного набора данных. Кроме того, как я могу лениво загрузить dataset, также убедиться, что сортировка и фильтрация выполняются для полных данных, а не только для фрагмента данных. 1. Возможно ли достичь этого с помощью каких-либо библиотек, мне нужны несколько рабочих демонстраций или руководство по реализации этого.

Комментарии:

1. Я предлагаю использовать подобный компонент: primefaces.org/primeng/#/table

Ответ №1:

Существуют фреймворки, такие как angular material или primeng, которые предоставляют таблицу с разбиением на страницы. Но я не уверен в отложенной загрузке.

Ответ №2:

То, что вы упомянули здесь, вообще не проблема. Это базовая функциональность любой таблицы данных. У вас есть множество вариантов, на которые можно обратить внимание.

  1. Таблица PrimeNG (Турбо-таблица, также известная как p table): простота разработки, но очень медленная, если вы используете форматирование и имеете записей более 150 на странице. Хорошая документация, бесплатная.

  2. Ag-Grid: имеет общедоступную и недорогую версию. Хорошая документация. Производительность также улучшилась. Разработка сложнее, чем PrimeNG table, но не настолько уж и сложна. Также поддерживает анимацию.

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

  1. Fin-Гипергрид. npm, github, CDN, документ API, демо
  2. SlickGrid. npm, github, демо

Для лучшего сравнения производительности, пожалуйста, обратитесь к этой статье.

Комментарии:

1. Спасибо за понимание. В соответствии с политикой компании, у меня есть доступ к использованию Primeng и ngx-bootstrap. Как я буду обрабатывать такие огромные данные в пользовательском интерфейсе? Будем ли мы вызывать API для каждой сортировки, фильтра или разбивки на страницы?

2. @SNaik Короче говоря, да, вам придется каждый раз вызывать фильтрацию и разбивку на страницы. Перенос больших объемов данных является очень дорогостоящим и снижает вашу производительность, а для рендеринга потребуется время. Сначала отобразите некоторые данные в таблице, а затем на основе события фильтрации и сортировки вы сможете снова извлекать данные из серверной части. Согласно моему опыту, Primeng — хороший вариант и очень прост в реализации

3. @SNaik обратитесь к ссылкам моего ответа. PrimeNg таблица выполняет все ваши требования, но будет выполняться очень медленно, если вам придется обрабатывать более 150 записей (строк) на странице, когда вы выполняли разбивку на страницы. Какие задачи есть с документацией и руководствами, если вы собираетесь с этим работать. (Не рекомендуется для больших наборов данных)

4. Как мы реализуем API из пользовательского интерфейса и серверной части? Есть ли демонстрационная версия, на которую я могу сослаться? Если я вызываю API при каждом событии, таком как сортировка, фильтр, разбивка на страницы — как Primeng упрощает мою жизнь? Если Primeng framework обрабатывает все, как должен быть спроектирован сервер и как мы можем спроектировать API, чтобы поддерживать непрерывное соединение для получения данных в пользовательском интерфейсе?