智能表客户端分页不工作:Apex

时间:2016-07-20 18:17:25

标签: angularjs pagination visualforce apex smart-table

我已经将智能桌上的示例跟随到了' T'。我无法让Client Side分页工作。数据是异步加载的,因此是st-safe-src

主要问题是页面长度没有减少到定义的长度,也没有显示任何按钮。控制台中没有错误。

<apex:page standardController="Account" extensions="RegulationOCheckController">

    <apex:stylesheet value="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

    <apex:includescript value="//code.angularjs.org/1.3.1/angular.js" />
    <apex:includescript value="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js" />
    <apex:includescript value="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.js" />
    <apex:includescript value="//cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js" />

    <script>

        var app = angular.module('RegulationOCheck', ['smart-table', 'ui.bootstrap'])

        app.controller('CompareController', function($scope, DataService){

            DataService.regulationOCheck().then(function(data){

                $scope.collection = data

            })


        })

        app.factory('DataService', ['$q', '$rootScope', function($q, $rootScope){

            var funcs = {}

            funcs.regulationOCheck = function(){

                var deferred = $q.defer()

                RegulationOCheckController.compare(
                    '{!$CurrentPage.parameters.id}',
                    function(result, event){
                        $rootScope.$apply(function(){
                            if(event.statusCode >= 200 || event.statusCode < 300){
                                deferred.resolve(JSON.parse(result))
                            }else{
                                deferred.reject(event)
                            }
                        })
                    },
                    { escape: false }
                )

                return deferred.promise

            }

            return funcs
        }])

    </script>

    <apex:pageBlock >

            <div ng-app="RegulationOCheck" ng-controller="CompareController">

                <table st-safe-src="collection" st-table="displayed" class="smart-table table">
                    <thead>
                        <tr>
                            <th st-sort="accountName">Insider Name</th>
                            <th st-sort="similarity ">% Similarity</th>
                        </tr>
                        <tr>
                            <th colspan="2">
                                <input st-search="accountName" placeholder="search for insider" class="input-sm form-control" type="search" />
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="row in displayed">
                            <td>{{ row.accountName }}</td>
                            <td>{{ row.similarity }}</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td class="text-center"
                                st-pagination=""
                                st-items-by-page="10"
                                st-displayed-pages="7"
                                colspan="2"></td>
                        </tr>
                    </tfoot>
                </table>

            </div>

    </apex:pageBlock>     

</apex:page>

1 个答案:

答案 0 :(得分:0)

您的问题出在$http工厂内,您使用延迟构造函数获取数据,而不是使用正确的funcs.regulationOCheck = function(){ var deferred = $q.defer() RegulationOCheckController.compare( '{!$CurrentPage.parameters.id}', function(result, event){ $rootScope.$apply(function(){ if(event.statusCode >= 200 || event.statusCode < 300){ deferred.resolve(JSON.parse(result)) }else{ deferred.reject(event) } }) }, { escape: false } ) return deferred.promise } 调用。

你应该更换这个烂摊子

funcs.regulationOCheck = function(){

            RegulationOCheckController.compare(
                '{!$CurrentPage.parameters.id}',
                function(result, event){
                    $rootScope.$apply(function(){
                        if(event.statusCode >= 200 || event.statusCode < 300){
                            return $q.when(JSON.parse(result))
                        }else{
                            return $q.reject(event)
                        }
                    })
                },
                { escape: false }
            )
        }

有一些

的内容
$http

甚至funcs.regulationOCheck = function() { return $http.get("data.json"); }

$rootScope.$apply

并且避免使用{{1}},它会为所有应用程序调用摘要周期,这对您的场景来说完全没有必要

这是plunker demo