Adding pagination in angular js table

Question

I have the following table:

<div class="container-fluid">

                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th>Action Date</th>
                                        <th>Action Taken</th>
                                        <th>Problem</th>
                                        <th>Status</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="contact in customer.contactHistory">
                                        <td>{{contact.actionDate}}</td>
                                        <td>{{contact.actionTaken}}</td>
                                        <td>{{contact.problem}}</td>
                                        <td>{{contact.status}}</td>
                                    </tr>
                                    </tbody>

                                </table>

                            </div>

How can I add pagination in this? I have a seperate js controller file for this. I want to add pagination so only 10 rows are visible when the pages loads.

Answer 1

Create Pagination.js as angular service as below, it could required you need to play around a code for to implement in your one.

var app = angular.module('qaApp');
app.factory("paginationService", function($location) {
    /**
     * Create a Pagination object
     * @type {{}}
     */
    var obj = {};
    var url = $location.absUrl().split('/')[0];

    obj.pages = [];

    /*if(url == 'test'){
        obj.url = "/design/views/paginationtest.html";
    }else{
        obj.url = "/design/views/pagination.html";
    }*/
    /* pagination view url (html fragment */
    obj.url = "/views/pagination.html";
    obj.newUrl = "/views/pagination-new.html";

    /* the last page */
    obj.lastPage = 1;
    /* the current page */
    obj.currentPage = 1;
    /* per page size */
    obj.perPage = 1;
    /* total records */
    obj.totalRecords = 1;
    /* record from */
    obj.from = 0;
    /* record to */
    obj.to = 1;
    /* set all the variable from the api */
    obj.set = function(data) {
        if(data) {
            obj.lastPage = data.last_page;
            obj.currentPage = data.current_page;
            obj.perPage = data.per_page;
            obj.totalRecords = data.total;
            obj.from = data.from;
            obj.to = data.to;
            /* enable/disable the next button */
            if(obj.currentPage == obj.lastPage) obj.nextDisabled = true;
            else obj.nextDisabled = false;
            /* enable/disable the previous button */
            if(obj.currentPage == 1) obj.previousDisabled = true;
            else obj.previousDisabled = false;
            obj.setPages();
        }
    };
    obj.reset = function() {
        obj.lastPage = false;
        obj.currentPage = 1;
        obj.perPage = 1;
        obj.totalRecords = 0;
        obj.from = 0;
        obj.to = 1;
        obj.nextDisabled = true;
        obj.previousDisabled = true;
        obj.setPages();
    };
    obj.next
    /* travel to the next page */
    obj.loadNext = function(loadAPIData) {
        obj.currentPage +=1;
        loadAPIData(obj.currentPage);
    };

    obj.loadPage = function(loadAPIData, pageNo){
         obj.currentPage = pageNo;
        loadAPIData(obj.currentPage);
    }
    /* travel to the previous page */
    obj.loadPrevious = function(loadAPIData) {
        if(obj.currentPage == 1){
            return;
        }
        obj.currentPage -=1;
        loadAPIData(obj.currentPage);
    };
    /* travel to the last page */
    obj.loadLast = function(loadAPIData) {
        obj.currentPage = obj.lastPage;
        loadAPIData(obj.currentPage);
    };
    /* travel to the first page */
    obj.loadFirst = function(loadAPIData) {
        obj.currentPage = 1;
        loadAPIData(obj.currentPage);
    };
    /* if next button is enabled */
    obj.nextDisabled = true;
    /* if previous button is enabled */
    obj.previousDisabled = true;
    /* Code Added for Pagination with Numbering*/
    obj.setPages = function () {

        var pages = [];
        totalPage = Math.ceil(obj.totalRecords  / obj.perPage);
        var startPage = obj.currentPage;
        var endPage = totalPage;
        if(obj.currentPage > 3) {
            startPage = obj.currentPage - 3;
           //pages.push({'class': '' , 'pageNo' : 1 , 'label' : "<<"});
        }
        if(totalPage > obj.currentPage + 3){
            endPage = obj.currentPage + 3;
        }
        for (var i = startPage; i <= endPage; i++) {
            if (i == obj.currentPage) {
                pages.push({'class': 'active' , 'pageNo' : i, 'label' : i});
            } else {
                pages.push({'class': '', 'pageNo' : i , 'label' : i});
            }
        }

        obj.pages = pages;
    };

    /* return the pagination object */
    return obj;
});

and here is the Html for displaying the pagination UI as below

<div >
        <div class="slide-animate" ng-include="pagination.url"></div>
    </div>