CODEWITHSUNDEEP
javascriptangularjspagination
Nicklas Kevin Frank
Nicklas Kevin Frank

Reputation: 6337

built in ng-table pagination struggle with performance vs. other solutions

I am currently playing around with different implementations of pagination in my application.

I would very much like to use ng-table and the build in pagination but it seems to struggle horribly when handling several thousand records. And yes, that is a lot of records, but I am able to built a different pagination that easily handles several hundred thousand and doing so much much much faster then ng-table.

The situation is I have two implementations listed below. The first one is ng-table and the other one is the mystically better implementation.

I have tried to limit both of these implementations to the absolute minimum required code in hope of getting the best possible answer, I hope this is enough

My Question: How do I best implement the ng-table pagination, like the implementation below, for best possible performance. And/or how can I change the ng-table to cope with its performance issue handling a lot of records with filtering/pagination?

Ngtable implementation (the struggler)

Nothing out of the ordinary implementation wise.

http://plnkr.co/edit/ISa4xg?p=info

Controller 

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10           // count per page
}, {
    total: data.length, // length of data
    getData: function($defer, params) {
        $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
});

Table

<table ng-table="tableParams" class="table">
     <tr ng-repeat="user in $data">
         <td data-title="'Name'">{{user.name}}</td>
         <td data-title="'Age'">{{user.age}}</td>
     </tr>
 </table>

The hard implementation

http://jsfiddle.net/2ZzZB/56/

Controller

$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.data = [];
$scope.numberOfPages=function(){
    return Math.ceil($scope.data.length/$scope.pageSize);                
}
for (var i=0; i<45; i++) {
    $scope.data.push("Item "+i);
}

HTML

<li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize">
        {{item}}
</li>
</ul>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
    Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
    Next
</button>

Upvotes: 1

Views: 1446

Answers (1)

colestrode
colestrode

Reputation: 10658

The the first implementation is slower because you are calling data.slice() in your pagination function. This creates a new array and so will be slower as the array gets bigger. In other words, calling slice() for pagination will run in O(N) time.

The second example simply accesses entries in an array by index, which will be O(1) time regardless of the size of the array.

As I said in my comment above, the real issue here is that you are doing client side pagination. Regardless of your implementation, client-side pagination will slow down your app when you reach hundreds of thousands of records; even if pagination is fast, holding that much data in memory will slow down the browser. For data of that size you need to use server-side pagination.

Upvotes: 1

Related Questions