Smart Table Client Side Pagination Not Working: Apex

Question

I've followed the examples on Smart Table to a 'T'. I'm unable to get Client Side pagination working. The data is loading asynchronously, hence the st-safe-src.

The main issue is that the page length is not reducing to the defined length and none of the buttons are displaying. There are zero errors in the console.

<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>

Answer 1

Your problem lies inside the DataService factory, you get your data using a deferred constructor instead of utilizing a proper $http call.

You should replace this mess

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
        }

With something along the lines of

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 }
            )
        }

or even $http

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

And avoid using $rootScope.$apply, it will call a digest cycle for all the application and it's totally not necessary for your scenario

Here is a plunker demo