Разбивка на страницы на стороне клиента Smart Table не работает: Apex

Я следовал примерам на Smart Table до буквы «Т». Я не могу заставить работать разбивку на страницы на стороне клиента. Данные загружаются асинхронно, поэтому 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>

pagination angularjs apex visualforce smart-table
person davecalvin    schedule 20.07.2016    source источник
comment
создать демонстрацию plunker, которая воспроизводит проблему   -  person charlietfl    schedule 20.07.2016
comment
Я не могу передать проблему в Plunker. Я думаю, что эта проблема связана с циклом дайджеста. Я использую удаленное взаимодействие JavaScript для вызова уровня службы Apex, который возвращает данные.   -  person davecalvin    schedule 21.07.2016
comment
Я думаю, что ваша проблема связана с RegulationOCheckController. прочитайте это stackoverflow.com/questions/23803743/   -  person svarog    schedule 23.07.2016

Ответы (1)


arrow_upward
0
arrow_downward

Ваша проблема заключается в фабрике DataService, вы получаете свои данные с помощью отложенного конструктора вместо использования правильного вызова $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, это вызовет цикл дайджеста для всего приложения, и это совершенно не обязательно для вашего сценария.

Вот демонстрация плунжера

person svarog    schedule 23.07.2016
comment
Из-за наложенного Salesforce ограничения на глубину выноски я был вынужден использовать удаленное взаимодействие JavaScript для вызова метода сравнения контроллера Apex. К сожалению, этот беспорядок необходим. Я не уверен, как обойти ограничение глубины выноски любым другим способом. Я бы хотел просто использовать модуль $http. - person davecalvin; 24.07.2016
comment
вы можете запустить функцию внутри $rootScope.$apply без $rootScope.$apply ? - person svarog; 24.07.2016
comment
Да, я могу. Я удалил приложение $rootScope.$apply(). Также переработан мой код, чтобы избежать реализации анти-шаблона. Все еще получаю ту же проблему. Набор данных возвращается из веб-службы правильно, но интеллектуальная таблица не отображается должным образом. Я не знаю, как копнуть глубже. - person davecalvin; 25.07.2016