Pagination with more number of page buttons looks good for desktop. For mobile screens smaller number of page buttons looks good . If you want to show same page in desktop and mobile then this program will be helpful.
Here I am using Bootstrap Angular UI  for Pagination component. Get to know about Bootstrap UI from here. The attribute max-size which effects the number of pages in bootstrap pagination component. Here we are going to change max-size attribute value based on window size which gives responsive behavior.

Markup 

Here observe maxSize attribute. We are going to change this maxSize attribute value on window resize
<html ng-app="ui.bootstrap.demo" ng-controller="PaginationDemoCtrl">
. . .
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="/js/ui-bootstrap-tpls-0.12.1.min.js"></script>
<link type='text/css' rel='stylesheet' href='/css/bootstrap.min.css'/>
. . .
 <pagination items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage" max-size="maxSize" class="pagination-sm" boundary-links="true">
</pagination>
. . .

Script

// Initiate Angular App
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

// Initiate Controller
angular.module('ui.bootstrap.demo').controller('PaginationDemoCtrl',
function ($scope,  $window) {
        // Pagination variables
        $scope.totalItems = 100;
        $scope.currentPage = 2;
        $scope.maxSize = 20;
        $scope.itemsPerPage = 3;
        $scope.windowWidth = '';
        
         // Window resize event
         var w = angular.element($window);
         w.bind('resize', function () {
             
             // Get window width
             $scope.windowWidth = "innerWidth" in window ? window.innerWidth : document.documentElement.offsetWidth;
             
             // Change maxSize based on window width
             if($scope.windowWidth > 1000) {
                 $scope.maxSize = 20;        
             } else if($scope.windowWidth > 800) {
                 $scope.maxSize = 15;
             } else if($scope.windowWidth > 600) {
                 $scope.maxSize = 8;
             } else if($scope.windowWidth > 400) {
                 $scope.maxSize = 5;
             } else {
                 $scope.maxSize = 2;
             }
             $scope.$apply();
         });
});

0 comments:

Blogroll

Follow this blog by Email

Popular Posts