jquery - How to paginate a list in OnsenUI framework -
i used onsenui , justified gallery plugin display number of products in list hybrid mobile app. , want paginate list every 4 products. have tried of pagination jquery plugins , wouldn't work.
here full coding https://www.dropbox.com/s/d2jeymdxqgdkyun/project.zip?dl=0
<!doctype html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <title>project lira</title> <link rel="stylesheet" href="lib/onsen/css/onsenui.css"> <link rel="stylesheet" href="styles/onsen-css-components-blue-basic-theme.css"> <link rel="stylesheet" href="styles/app.css"/> <script src="lib/onsen/js/angular/angular.js"></script> <script src="lib/onsen/js/onsenui.js"></script> <script src="cordova.js"></script> <script> var module = angular.module('app', ['onsen']); </script> <style> .page--menu-page__background { background-color: #333; } .page--menu-page__content { color: white; } .menu-close, .menu-close > .toolbar-button { color: #999; } .menu-list, .menu-item:first-child, .menu-item:last-child, .menu-item { background-color: transparent; background-image: none !important; border-color: transparent; color: #fff; } .menu-item { padding: 0 0 0 20px; line-height: 52px; height: 52px; text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 0px; } .menu-item:active { background-color: rgba(255, 255, 255, 0.1); } .menu-notification { display: inline-block; margin-top: 12px; font-size: 14px; height: 16px; line-height: 16px; min-width: 16px; font-weight: 600; } .bottom-menu-list, .bottom-menu-item:first-child, .bottom-menu-item:last-child, .bottom-menu-item { border-color: #393939; background-color: transparent; background-image: none !important; color: #ccc; } .bottom-menu-item:active { background-color: rgba(255, 255, 255, 0.1); } </style> </head> <body> <ons-sliding-menu menu-page="menu.html" main-page="page1.html" side="left" var="menu" type="reveal" max-slide-distance="260px" swipable="true"> </ons-sliding-menu> <ons-template id="menu.html"> <ons-page modifier="menu-page"> <ons-toolbar modifier="transparent"></ons-toolbar> <ons-list class="menu-list"> <ons-list-item class="menu-item" ng-click="menu.setmainpage('page1.html', {closemenu: true})"> <ons-icon icon="fa-plus"></ons-icon> justified gallery </ons-list-item> </ons-list> </ons-page> </ons-template> <ons-template id="page1.html"> `enter code here` <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button ng-click="menu.toggle()"> <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon> </ons-toolbar-button> </div> <div class="center">justified gallery</div> </ons-toolbar> <ons-row style="margin-top: 100px;"> <ons-col align="center"> <div class="holder"> </div> <ul id="cd-gallery-items" class="cd-container"> <li> <ul class="cd-item-wrapper"> <li class="cd-item-front"><a href="#0"><img src="img/thumb-1.jpg" alt="preview image"></a></li> <li class="cd-item-middle"><a href="#0"><img src="img/thumb-2.jpg" alt="preview image"></a></li> <li class="cd-item-back"><a href="#0"><img src="img/thumb-3.jpg" alt="preview image"></a></li> <li class="cd-item-out"><a href="#0"><img src="img/thumb-4.jpg" alt="preview image"></a></li> <!-- <li class="cd-item-out">...</li> --> </ul> <!-- cd-item-wrapper --> <div class="cd-item-info"> <b><a href="#0">product name</a></b> <em>$9.99</em> </div> <!-- cd-item-info --> <nav> <ul class="cd-item-navigation"> <li><a class="cd-img-replace" href="#0">prev</a></li> <li><a class="cd-img-replace" href="#0">next</a></li> </ul> </nav> <a class="cd-3d-trigger cd-img-replace" href="#0">open</a> </li> <li> <ul class="cd-item-wrapper"> <li class="cd-item-front"><a href="#0"><img src="img/thumb-2.jpg" alt="preview image"></a></li> <li class="cd-item-middle"><a href="#0"><img src="img/thumb-3.jpg" alt="preview image"></a></li> <li class="cd-item-back"><a href="#0"><img src="img/thumb-1.jpg" alt="preview image"></a></li> </ul> <!-- cd-item-wrapper --> <div class="cd-item-info"> <b><a href="#0">product name</a></b> <em>$9.99</em> </div> <!-- cd-item-info --> <nav> <ul class="cd-item-navigation"> <li><a class="cd-img-replace" href="#0">prev</a></li> <li><a class="cd-img-replace" href="#0">next</a></li> </ul> </nav> <a class="cd-3d-trigger cd-img-replace" href="#0">open</a> </li> <li> <ul class="cd-item-wrapper"> <li class="cd-item-front"><a href="#0"><img src="img/thumb-3.jpg" alt="preview image"></a></li> <li class="cd-item-middle"><a href="#0"><img src="img/thumb-1.jpg" alt="preview image"></a></li> <li class="cd-item-back"><a href="#0"><img src="img/thumb-2.jpg" alt="preview image"></a></li> </ul> <!-- cd-item-wrapper --> <div class="cd-item-info"> <b><a href="#0">product name</a></b> <em>$9.99</em> </div> <!-- cd-item-info --> <nav> <ul class="cd-item-navigation"> <li><a class="cd-img-replace" href="#0">prev</a></li> <li><a class="cd-img-replace" href="#0">next</a></li> </ul> </nav> <a class="cd-3d-trigger cd-img-replace" href="#0">open</a> </li> <li> <ul class="cd-item-wrapper"> <li class="cd-item-front"><a href="#0"><img src="img/thumb-4.jpg" alt="preview image"></a></li> <li class="cd-item-middle"><a href="#0"><img src="img/thumb-1.jpg" alt="preview image"></a></li> <li class="cd-item-back"><a href="#0"><img src="img/thumb-2.jpg" alt="preview image"></a></li> </ul> <!-- cd-item-wrapper --> <div class="cd-item-info"> <b><a href="#0">product name</a></b> <em>$9.99</em> </div> <!-- cd-item-info --> <nav> <ul class="cd-item-navigation"> <li><a class="cd-img-replace" href="#0">prev</a></li> <li><a class="cd-img-replace" href="#0">next</a></li> </ul> </nav> <a class="cd-3d-trigger cd-img-replace" href="#0">open</a> </li> <li> <ul class="cd-item-wrapper"> <li class="cd-item-front"><a href="#0"><img src="img/thumb-1.jpg" alt="preview image"></a></li> <li class="cd-item-middle"><a href="#0"><img src="img/thumb-2.jpg" alt="preview image"></a></li> <li class="cd-item-back"><a href="#0"><img src="img/thumb-3.jpg" alt="preview image"></a></li> </ul> <!-- cd-item-wrapper --> <div class="cd-item-info"> <b><a href="#0">product name</a></b> <em>$9.99</em> </div> <!-- cd-item-info --> <nav> <ul class="cd-item-navigation"> <li><a class="cd-img-replace" href="#0">prev</a></li> <li><a class="cd-img-replace" href="#0">next</a></li> </ul> </nav> <a class="cd-3d-trigger cd-img-replace" href="#0">open</a> </li> <li> <ul class="cd-item-wrapper"> <li class="cd-item-front"><a href="#0"><img src="img/thumb-2.jpg" alt="preview image"></a></li> <li class="cd-item-middle"><a href="#0"><img src="img/thumb-3.jpg" alt="preview image"></a></li> <li class="cd-item-back"><a href="#0"><img src="img/thumb-1.jpg" alt="preview image"></a></li> </ul> <!-- cd-item-wrapper --> <div class="cd-item-info"> <b><a href="#0">product name</a></b> <em>$9.99</em> </div> <!-- cd-item-info --> <nav> <ul class="cd-item-navigation"> <li><a class="cd-img-replace" href="#0">prev</a></li> <li><a class="cd-img-replace" href="#0">next</a></li> </ul> </nav> <a class="cd-3d-trigger cd-img-replace" href="#0">open</a> </li> <li> <ul class="cd-item-wrapper"> <li class="cd-item-front"><a href="#0"><img src="img/thumb-3.jpg" alt="preview image"></a></li> <li class="cd-item-middle"><a href="#0"><img src="img/thumb-2.jpg" alt="preview image"></a></li> <li class="cd-item-back"><a href="#0"><img src="img/thumb-4.jpg" alt="preview image"></a></li> </ul> <!-- cd-item-wrapper --> <div class="cd-item-info"> <b><a href="#0">product name</a></b> <em>$9.99</em> </div> <!-- cd-item-info --> <nav> <ul class="cd-item-navigation"> <li><a class="cd-img-replace" href="#0">prev</a></li> <li><a class="cd-img-replace" href="#0">next</a></li> </ul> </nav> <a class="cd-3d-trigger cd-img-replace" href="#0">open</a> </li> <li> <ul class="cd-item-wrapper"> <li class="cd-item-front"><a href="#0"><img src="img/thumb-4.jpg" alt="preview image"></a></li> <li class="cd-item-middle"><a href="#0"><img src="img/thumb-1.jpg" alt="preview image"></a></li> <li class="cd-item-back"><a href="#0"><img src="img/thumb-2.jpg" alt="preview image"></a></li> </ul> <!-- cd-item-wrapper --> <div class="cd-item-info"> <b><a href="#0">product name</a></b> <em>$9.99</em> </div> <!-- cd-item-info --> <nav> <ul class="cd-item-navigation"> <li><a class="cd-img-replace" href="#0">prev</a></li> <li><a class="cd-img-replace" href="#0">next</a></li> </ul> </nav> <a class="cd-3d-trigger cd-img-replace" href="#0">open</a> </li> <li> <ul class="cd-item-wrapper"> <li class="cd-item-front"><a href="#0"><img src="img/thumb-1.jpg" alt="preview image"></a></li> <li class="cd-item-middle"><a href="#0"><img src="img/thumb-2.jpg" alt="preview image"></a></li> <li class="cd-item-back"><a href="#0"><img src="img/thumb-3.jpg" alt="preview image"></a></li> </ul> <!-- cd-item-wrapper --> <div class="cd-item-info"> <b><a href="#0">product name</a></b> <em>$9.99</em> </div> <!-- cd-item-info --> <nav> <ul class="cd-item-navigation"> <li><a class="cd-img-replace" href="#0">prev</a></li> <li><a class="cd-img-replace" href="#0">next</a></li> </ul> </nav> <a class="cd-3d-trigger cd-img-replace" href="#0">open</a> </li> </ul> <!-- cd-gallery-items --> </ons-col> </ons-row> </ons-page> </ons-template> <!-- justified scripts & styles --> <script src="js/jquery-2.1.1.js"></script> <script src="js/main.js"></script> <link rel="stylesheet" href="css/reset.css"> <!-- css reset --> <link rel="stylesheet" href="css/style.css"> <!-- resource style --> <script src="js/modernizr.js"></script> <!-- modernizr --> </body> </html>
are using angularjs? it's pretty easy implement pagination in angularjs without of external plugins/libraries.
this simple controller pagination list of items:
module.controller('paginationcontroller', function($scope) { $scope.itemsperpage = 4; $scope.items = [1,2,3,4,5,6,7,8,9,10,11]; $scope.currentpage = 0; $scope.getcurrentpage = function() { return $scope.items.slice($scope.currentpage * $scope.itemsperpage, $scope.currentpage * $scope.itemsperpage + $scope.itemsperpage); }; $scope.nextpage = function() { $scope.currentpage = math.min(parseint(($scope.items.length - 1) / $scope.itemsperpage), $scope.currentpage + 1); } $scope.prevpage = function() { $scope.currentpage = math.max(0, $scope.currentpage - 1); } }); of course may not you'd it's pretty easy add other features.
i wrote small example using onsen ui list:
Comments
Post a Comment