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

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

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

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

Подготовка

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

1. Обновим все Nuget-пакеты, которые встроены в шаблон MVC4.
2. Установим новый пакет JsSite – библиотека Java-скриптов.
3. Еще один пакет SampleData, содержит тестовые данные (чтобы было с чем работать, описание пакета и его создание уже было описано ранее)

Второе: в главном шаблоне приложения _Layout.cshtml добавим ссылки на скрипты, которые добавились в систему вместе с JsSite.

@{
    ViewBag.Title = "Home Page";
}

<h1 data-bind="text: meta.title"></h1>
<div id="clock" data-bind="text: clock.time"></div>
<p data-bind="text: meta.description"></p>

<p>
    page size: <span data-bind="text: people().length"></span>
    <br />
    total items: <span data-bind="text: ds.queryParams.total"></span>
    <br />
    current page index: <span data-bind="text: ds.queryParams.index"></span>
    <br />
    groupSize: <span data-bind="text: ds.queryParams.groupSize"></span>
    <br />
</p>
<div data-bind="blockUI: indicator">
    <div>
        <input type="text" name="name"
            data-bind="value: ds.queryParams.query, valueUpdate:'keyup'" />
    </div>

    <div data-bind="pager: pager"></div>

    <table>
        <thead>
            <tr>
                <th>Имя</th>
                <th>Возраст</th>
                <th>Профессия</th>
                <th>В партии</th>
                <th>Пол</th>
            </tr>
        </thead>
        <tbody>
            <!-- ko foreach: people -->
            <tr>
                <td>
                    <span data-bind="text: Name"></span>
                </td>
                <td>
                    <span data-bind="text: Age"></span>
                </td>
                <td>
                    <span data-bind="text: Description"></span>
                </td>
                <td>
                    <span data-bind="date: MemberDate"></span>
                </td>
                <td>
                    <span data-bind="text: Gender"></span>
                </td>
            </tr>
            <!-- /ko -->
        </tbody>
    </table>

</div>


@section scripts
{
    <script src="~/Scripts/app/site.vm.homeIndex.js"></script>
}


@*<pre>
<span data-bind="text: JSON.stringify(ko.toJS($data),null,2)"></span>
</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.