How To Implement Server Side Filtering And Pagination In AngularJS

Question

I am using AngularJS to show data from database, i have implement a Client Side Pagination and Filtering on it but when it load huge data my App becomng crash.

so, i wonder to change it to server side pagination by limit the data until 10 item / page, it's done but when i'm do filtering data, it's only search to displayed item on page. This is my code so far

var app = angular.module('peradmin', ['ngRoute', 'ngAnimate']);
var baseUrl = 'http://localhost/peradmin/';
var currentUrl = window.location.pathname.split('/');

app.filter('startFrom', function() {
  return function(input, start) {
    if (input) {
        start = +start;
        return input.slice(start);
    }
    return [];
  }
});

app.controller('CustomerController', function($scope, $http, filterFilter) {
$scope.customer = [];
$scope.filtered = [];

$scope.pageSize = 10;
$scope.currentPage = 0;

$scope.getCustomerData = function(currentPage) {
    $http({
        method: 'POST',
        url: baseUrl + 'customer/getcustomer',
        data: { limit: $scope.pageSize, offset: currentPage },
        headers: { 'Content-Type': 'application/json' }
    }).then(function(response) {
        $scope.customer = response.data.customer;
        $scope.totalData = response.data.total;
        $scope.pageNumber = Math.ceil($scope.totalData / $scope.pageSize);
    })
}

$scope.filterData = function() {
    $scope.currentPage = 0;
    $scope.pageNumber = Math.ceil($scope.filtered.length / $scope.pageSize);
};

$scope.$watchCollection('customer', function() {
    if ($scope.results == undefined) return;
    $scope.currentPage = 0;
    $scope.pageNumber = Math.ceil($scope.totalData / $scope.pageSize);
})

// Next & Previous Button
$scope.paging = function(type) {
    if (type == 0 && $scope.currentPage > 0) {
        --$scope.currentPage;
    } else if (type == 1 && $scope.currentPage < $scope.pageNumber - 1) {
        ++$scope.currentPage;
    }
    $scope.getCustomerData($scope.pageSize * $scope.currentPage);
}

// Back to First Page
$scope.firstPage = function() {
    $scope.currentPage = 0;
    $scope.getCustomerData($scope.pageSize * $scope.currentPage);
}

// Go to Last Page
$scope.lastPage = function() {
    $scope.currentPage = $scope.pageNumber - 1;
    $scope.getCustomerData($scope.pageSize * $scope.currentPage + 1);
}

// call data when page is loaded
$scope.getCustomerData($scope.currentPage);

});

And this is my view :

<div class="well" id="formsearch">
    <form id="search-form" class="form-inline float-lg-right" action="" method="POST">
        <input type="text" class="form-control" placeholder="Name" name="name" id="name" ng-model="filter.NAME" ng-change="filterData()">
        <input type="text" class="form-control" placeholder="Email" name="email" id="email"  ng-model="filter.EMAIL" ng-change="filterData()">
    </form>
</div>
<div class="box">
    <div class="box-body table-responsive" ng-controller="CustomerController">  
       <label>Page {{ currentPage + 1 }} from {{ pageNumber }} | Total: {{ totalData }} Data</label>
        <br><br>
        <table class="table table-hover table-bordered table-striped" width="100%">
            <thead>
                <tr>
                    <th style="text-align:center;width:20%;">Email</th>
                    <th style="text-align:center;width:25%;">Name</th>
                    <th style="text-align:center;width:10%;">Type</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="val in $parent.filtered = (customer | filter:{NAMA:filter.NAME,EMAIL:filter.EMAIL})">
                    <td>{{ val.EMAIL }}</td>
                    <td>{{ val.NAME }}</td>
                    <td style="text-align:center;">{{ val.CUST_TYPE == "B" ? "Business": "Personal"}}</td>
                </tr>
            </tbody>
        </table>

        <ul class="pagination" ng-if="totalData > 0">
            <li><a href="#" ng-click="firstPage()">First Page</a></li>
            <li><a href="#" ng-click="paging(0)">Previous</a></li>
            <li><a href="#" ng-click="paging(1)">Next</a></li>
            <li><a href="#" ng-click="lastPage()">Last Pager</a></li>
        </ul>

        <div class="alert alert-danger" ng-if="totalData == 0"><center>Data Is Not Found</center></div>
    </div>
</div>

how to make it filter to whole data on database?

Thanks

you should google how to implement pagination in the language of your server or database, not angular. The backend should not care about what is the UI technology. — jediz
– jediz, Commented Apr 18, 2017 at 9:51
i'm running AngularJS with Codeigniter because i'm new on AngularJS so it's not fully Javascript. — Riky Fahri Hasibuan
– Riky Fahri Hasibuan, Commented Apr 18, 2017 at 9:54

Leguest · Accepted Answer · 2017-04-18 09:52:07Z

2

I think it should be:

$http({
    method: 'POST',
    url: baseUrl + 'customer/getcustomer',
    data: { 
            limit: $scope.pageSize, 
            offset: currentPage,
            filter: {
               name: $scope.filter.NAME,
               email: $scope.filter.EMAIL
            }
          },
    headers: { 'Content-Type': 'application/json' }
})

Then on server side, wtih these 2 filter properties, you can perform database side filtration

Also, you need button to apply filters or throttle on your change handler:

$scope.filterData = function() {
        $scope.currentPage = 0;
        $scope.pageNumber = Math.ceil($scope.filtered.length / $scope.pageSize);


        $scope.getCustomerData($scope.currentPage);

};

To perform throttle you can try ng-model-options='{ debounce: 1000 }':

   <input type="text" ng-model-options='{ debounce: 1000 }' class="form-control" placeholder="Name" name="name" id="name" ng-model="filter.NAME" ng-change="filterData()">
   <input type="text" ng-model-options='{ debounce: 1000 }' class="form-control" placeholder="Email" name="email" id="email"  ng-model="filter.EMAIL" ng-change="filterData()">

edited Apr 18, 2017 at 9:52

answered Apr 18, 2017 at 9:40

Leguest

2,1372 gold badges18 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Riky Fahri Hasibuan Over a year ago

i try this and this error is show up ReferenceError: filter is not defined at b.$scope.getCustomerData (CustomerController.js:17)

Leguest Over a year ago

Sorry, yes, try it with $scope, like $scope.filter.NAME

Riky Fahri Hasibuan Over a year ago

Still error TypeError: Cannot read property 'NAME' of undefined at b.$scope.getCustomerData i have updated my javascript code above, maybe you can find out why...

Leguest Over a year ago

It is because you need to declare $scope.filter. Try this: $scope.filter = {NAME: "", EMAIL: ""}. Put it after your $scope.currentPage = 0; declaration.

Riky Fahri Hasibuan Over a year ago

sorry for late response, i have try your code carefully and now it is working now....thanks mate you are my saviour :D

Collectives™ on Stack Overflow

How To Implement Server Side Filtering And Pagination In AngularJS

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related