HTML5: PagedList на knockout.js или как разбить данные на страницы через AJAX

Постановка задачи

Требуется получение данных в формате JSON. Данные должны быть разбиты на страницы, размер страниц можно устанавливать, страницы можно переключать (а иначе зачем всё это). А также требуется возможность поиска (фильтрации).

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

Подготовка

Первое: в Package Maganger Console:

  1. Обновим все Nuget-пакеты, которые встроены в шаблон MVC4.
  2. Установим новый пакет JsSite – библиотека Java-скриптов.
  3. Еще один пакет 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

HTML5: PagedList на knockout.js или как разбить данные на страницы через AJAX | | 2013-02-13 00:14:30 | | Программирование | | Постановка задачиТребуется получение данных в формате JSON. Данные должны быть разбиты на страницы, размер страниц можно устанавливать, страницы можно переключать (а иначе зачем всё это). А также | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться статьей: