angularjs使用智能表分页

时间:2015-05-11 09:50:14

标签: angularjs smart-table

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

  1. 首先,我需要从数据库中获取20条记录,并且每页只显示10个项目。
  2. 点击第3页后,需要查询数据库(服务电话)并获取另外20条记录..等等(但没有服务器调用第2页)
  3. 我正在使用智能表管道/ 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 个答案:

答案 0 :(得分:3)

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

然后,

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

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

答案 1 :(得分:-1)

  1. 将页面大小设置为10.

  2. 维护服务器提取的行的服务级别数组对象(var fetchedData)。

  3. 如果客户端中没有所需的数据量,则只调用服务器。

  4. 始终从fetchedData过滤分页数据。

  5. 在您的服务中有这样的事情。

        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