Angularjs нумерация страниц с использованием смарт-таблицы

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

  1. Сначала мне нужно получить 20 записей из базы данных и отобразить только 10 элементов на странице.
  2. После нажатия на 3-ю страницу, необходимо запросить базу данных (сервисный вызов) и получить еще 20 записей... и т. Д. (Но не вызов сервера для 2-й страницы)

Я использую плагин smart table pipe/ajax для отображения записей.

Как этого добиться используя.

<div class="table-container" ng-controller="pipeCtrl as mc">
            <table class="table" st-pipe="mc.callServer" st-table="mc.displayed">
                <thead>
                <tr>
                    <th st-sort="id">id</th>
                    <th st-sort-default="reverse" st-sort="name">name</th>
                    <th st-sort="age">age</th>
                    <th st-sort="saved">saved people</th>
                </tr>
                <tr>
                    <th><input st-search="id"/></th>
                    <th><input st-search="name"/></th>
                    <th><input st-search="age"/></th>
                    <th><input st-search="saved"/></th>
                </tr>
                </thead>
                <tbody ng-show="!mc.isLoading">
                <tr ng-repeat="row in mc.displayed">
                    <td>{{row.id}}</td>
                    <td>{{row.name}}</td>
                    <td>{{row.age}}</td>
                    <td>{{row.saved}}</td>
                </tr>
                </tbody>
                <tbody ng-show="mc.isLoading">
                <tr>
                    <td colspan="4" class="text-center"><div class="loading-indicator"></div>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td class="text-center" st-pagination="" st-items-by-page="5" colspan="4">
                    </td>
                </tr>
                </tfoot>
            </table>
        </div> 

http://lorenzofox3.github.io/smart-table-website/

код в Plunker

http://plnkr.co/edit/wzUHcc9PBF6tzH8iAEsn?p=preview

2 ответа

Вам нужно добавить st-safe-src="tablecollection" так же как st-table=tablerow

Затем,

<tr ng-repeat="row in tablerow">

FMI, источник: нумерация страниц на стороне клиента не работает в смарт-таблице

  1. Установите размер страницы 10.

  2. Поддерживать объект массива уровня обслуживания (var fetchedData) для выбранных строк с сервера.

  3. Звоните на сервер только в том случае, если требуемый объем данных недоступен на стороне клиента.

  4. Всегда фильтруйте данные для нумерации страниц из fetchedData.

Нечто подобное к вашим услугам.

    var fetchedData = [];

    function getPage(start, number, params) {

        if (fetchedData.length < (start + number)) {
            //get the next 20 rows from the server and add to fetchedData;
        }

        var filtered = params.search.predicateObject ?
            $filter('filter')(fetchedData, params.search.predicateObject) :
            fetchedData;
        //rest of the logic 
Другие вопросы по тегам