HTML5: PagedList на knockout.js или как разбить данные на страницы через AJAX
Постановка задачи
Требуется получение данных в формате JSON. Данные должны быть разбиты на страницы, размер страниц можно устанавливать, страницы можно переключать (а иначе зачем всё это). А также требуется возможность поиска (фильтрации).
Давайте для начала подготовим к работе вновь созданный проект. Для этого выполним операции, которые были уже не раз описаны в предыдущих статьях.
Подготовка
Первое: в Package Maganger Console:
- Обновим все Nuget-пакеты, которые встроены в шаблон MVC4.
- Установим новый пакет JsSite – библиотека Java-скриптов.
- Еще один пакет SampleData, содержит тестовые данные (чтобы было с чем работать, описание пакета и его создание уже было описано ранее)
Второе: в главном шаблоне приложения _Layout.cshtml добавим ссылки на скрипты, которые добавились в систему вместе с JsSite.
1: @{
2: ViewBag.Title = "Home Page";
3: }
4:
5: <h1data-bind="text: meta.title"></h1>
6: <divid="clock"data-bind="text: clock.time"></div>
7: <pdata-bind="text: meta.description"></p>
8:
9: <p>
10: page size: <spandata-bind="text: people().length"></span>
11: <br/>
12: total items: <spandata-bind="text: ds.queryParams.total"></span>
13: <br/>
14: current page index: <spandata-bind="text: ds.queryParams.index"></span>
15: <br/>
16: groupSize: <spandata-bind="text: ds.queryParams.groupSize"></span>
17: <br/>
18: </p>
19: <divdata-bind="blockUI: indicator">
20: <div>
21: <inputtype="text"name="name"
22: data-bind="value: ds.queryParams.query, valueUpdate:'keyup'"/>
23: </div>
24:
25: <divdata-bind="pager: pager"></div>
26:
27: <table>
28: <thead>
29: <tr>
30: <th>Имя</th>
31: <th>Возраст</th>
32: <th>Профессия</th>
33: <th>В партии</th>
34: <th>Пол</th>
35: </tr>
36: </thead>
37: <tbody>
38: <!-- ko foreach: people -->
39: <tr>
40: <td>
41: <spandata-bind="text: Name"></span>
42: </td>
43: <td>
44: <spandata-bind="text: Age"></span>
45: </td>
46: <td>
47: <spandata-bind="text: Description"></span>
48: </td>
49: <td>
50: <spandata-bind="date: MemberDate"></span>
51: </td>
52: <td>
53: <spandata-bind="text: Gender"></span>
54: </td>
55: </tr>
56: <!-- /ko -->
57: </tbody>
58: </table>
59:
60: </div>
61:
62:
63: @section scripts
64: {
65: <scriptsrc="~/Scripts/app/site.vm.homeIndex.js"></script>
66: }
67:
68:
69: @*<pre>
70: <spandata-bind="text: JSON.stringify(ko.toJS($data),null,2)"></span>
71: </pre>*@
В качестве заключения
В предыдущем листинге, в строке 25 вы уже заметили, binding типа Pager, именно так осуществляется привязка site.controls.Pager() на форме (в разметке). Данная реализация пейджера очень проста, потому что малова-то кнопок навигации, но это уже дело техники.
Вся магия привязки лежит в Knockout, а конкретно в файле site.bindingHandlers.js,который устанавливается с пакетом JsSite, я написал ko.bindingHandlers.pager, который и выводит страницы от site.controls.Pager.
Кстати, вместе с пакетом JsSite появляется файл content/site.pager.css со стилями для пейджера и картинка-анимация images/ms-loader.gif.
Подробнее: http://feedproxy.google.com/~r/blogmusor/~3/wWFNnkUMEIs/111
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
Ничто так сильно не разрушает человека, как продолжительное бездействие. |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.