https://jaisteel.in/assets/js/pagination.js

1angular.module('pagination', []).directive('pagination', function ($compile) {
2    return {
3        restrict: 'E',
4//        transclude: 'element',
5        scope: {
6            option: '=',
7        },
8        controller: function ($scope, $element) {
9            var option = {
10                limit: 20
11            };
12            if (typeof $scope.option == 'undefined') {
13//                $element.attr('option', 'paginationoption');
14//                $compile($element);
15                $scope.option = {};
16            }
17            $scope.option.current_page = 1;
18            if (typeof $scope.option != 'undefined') {
19                if (typeof $scope.option.limit == 'undefined') {
20                    $scope.option.limit = option.limit;
21                }
22            }
23            $scope.option.set = function (data) {
24                $scope.option.num_page = data.num_page;
25                $scope.option.num_record = data.num_record;
26                $scope.option.start_record = data.start_record;
27                $scope.option.end_record = data.end_record;
28            };
29            $scope.increase_page = function () {
30                if ($scope.option.current_page < $scope.option.num_page) {
31                    $scope.option.current_page++;
32                }
33            };
34            $scope.decrease_page = function () {
35                if ($scope.option.current_page > 1) {
36                    $scope.option.current_page--;
37                }
38            };
39        },
40        template: function (e) {
41//            return '<div class="pagination">' +
42//                    '<div class="pagination_limit">' +
43//                    '' +
44//                    '</div>' +
45//                    '<ul>' +
46//                    '<li title="Page Limit">Limits : <input type="text" ng-model="option.limit" style="width:50px;height: 30px!important;margin-right:25px;" class="form-control"></li>' +
47//                    '<li title="First Page"><a class="btn btn-default btn-xs" ng-click="option.current_page=1">&#x2770;&#x2770;</a></li>' +
48//                    '<li title="Previous Page"><a class="btn btn-default btn-xs" ng-click="decrease_page()">&#x2770;</a></li>' +
49//                    '<li><input type="text" style="width:50px;height: 30px!important;" ng-model="option.current_page" class="form-control"></li>' +
50//                    '<li title="Next Page"><a class="btn btn-default btn-xs" ng-click="increase_page()">&#x2771;</a></li>' +
51//                    '<li title="Last Page"><a class="btn btn-default btn-xs" ng-click="option.current_page=option.num_page">&#x2771;&#x2771;</a></li>' +
52//                    '</ul>' +
53//                    '<div class="pagination_counting btn btn-success">{{option.start_record}} to {{option.end_record}} out of total {{option.num_record}} records</div>'
54//            '</div>';
55
56            return '<div class="pagination row">' +
57                    '<div class="col-lg-4 col-md-4 col-sm-4 col-4 my-auto mt-2 d-flex">' +
58                    '<label class="book-ticket-label" for="fromStation">Limits :</label> <input type="text" ng-model="option.limit" style="width:50px;height: 30px!important;margin-right:25px;" class="form-control"></div>' +
59                    '<div class="col-lg-4 col-md-4 col-sm-8 col-8 my-auto mt-2">' +
60//                    '<nav aria-label="Page navigation example">\n\
61                        '<ul class="pagination">' +
62                        '<li class="page-item" id="first-page"><a class="page-link" ng-click="option.current_page=1">&#x2770;&#x2770;</a></li>' +
63                        '<li class="page-item"><a class="page-link" ng-click="decrease_page()">&#x2770;</a></li>' +
64                        '<li class="page-item"><input type="text" style="width:60px;height: 38px!important;margin-right:6px!important;" ng-model="option.current_page" class="form-control text-center">' +
65                        '<li class="page-item"><a class="page-link" ng-click="increase_page()">&#x2771;</a></li>' +
66                        '<li class="page-item"><a class="page-link" ng-click="option.current_page=option.num_page">&#x2771;&#x2771;</a></li></ul></div>' +
67                    '<div class="col-lg-4 col-md-4 col-sm-12 col-12 my-auto mt-2">' +
68            '<div class="pagination_counting btn btn-success d-block">{{option.start_record}} to {{option.end_record}} out of total {{option.num_record}} records</div></div>' +
69            '</div>';
70        }
71    }
72})
73        .filter('pagination', function () {
74            return function (data, option) {
75                if (typeof data == 'undefined') {
76                    return [];
77                }
78                if (!option) {
79                    option = {};
80                }
81                var i = 0;
82                var j = (option.current_page - 1) * option.limit;
83                var start_record = j + 1;
84                var k = data.length % option.limit;
85                var l = parseInt(data.length / option.limit) + 1;
86                k = option.current_page == l ? k : option.limit;
87                var result = [];
88                while (i < k) {
89                    result.push(data[j]);
90                    i++;
91                    j++;
92                }
93                option.num_page = l;
94                option.num_record = data.length;
95                option.start_record = start_record;
96                option.end_record = start_record + k - 1;
97                if (typeof option.set != 'undefined') {
98                    option.set({
99                        num_page: l,
100                        num_record: data.length,
101                        start_record: start_record,
102                        end_record: parseInt(start_record) + parseInt(k) - 1
103                    });
104                }
105
106                return result;
107            };
108        });