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();
         });
});

1 comment:

  1. Tally Ho! Our edit of Shearling Leather Jackets includes shearling and waterproof options, all from independent brands. Moustache and flying scarf not required.

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts