angularjs分页使用智能表答案

【问题标题】：angularjs pagination using smart tableangularjs分页使用智能表
【发布时间】：2015-05-11 09:50:13
【问题描述】：

通过使用角度智能表，我如何使用偏移值获取结果集。例如，我在数据库中有 100 条记录

首先我需要从数据库中获取 20 条记录，并且每页只显示 10 项。
点击第3页后，需要查询数据库（服务调用）并获取另外20条记录..etc（但第2页没有服务器调用）

我正在使用智能表管道/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

【问题讨论】：

标签： angularjs smart-table

【解决方案1】：

您需要添加st-safe-src="tablecollection" 以及st-table=tablerow

那么，

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

FMI, 来源：Client side pagination not working in smart table

【讨论】：

【解决方案2】：

将页面大小设置为 10。
为从服务器获取的行维护一个服务级别数组对象 (var fetchedData)。
仅当客户端没有所需的数据量时才调用服务器。
始终从 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

【讨论】：