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.
Demo --- Download Script
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(); }); });
Tally Ho! Our edit of Shearling Leather Jackets includes shearling and waterproof options, all from independent brands. Moustache and flying scarf not required.
ReplyDelete