Twitter Bootstrap Question posted in

Go to Next page when a separate button from pagination?-Twitter bootstrap

How do I go to next page when a button “Press me” is pressed?
Here is my code:

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="PaginationDemoCtrl">

    <pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
    The selected page no: {{currentPage}}
</div>

<button>Press me</button>

  </body>
</html>

http://plnkr.co/edit/NVgCX8nrx0ovnCWE2eok?p=preview

Tags:

3

Answers


  1. 0

    … Your question is pretty vague, but I believe this is what you’re looking for:

    <button value='Press me' onClick='document.location="./NVgCX8nrx0ovnCWE2eok?p=preview"'>
    Login or Signup to reply.
  2. 0

    In your html move your controller to the body tag and add a click event for the button

    <!doctype html>
<html ng-app="plunker">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
        <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
        <script src="example.js"></script>
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
    </head>
    <body ng-controller="PaginationDemoCtrl">
        <div>
            <pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
            The selected page no: {{currentPage}}
        </div>
        <button ng-click="goToNext()">Press me</button>
    </body>
</html>

    In your script add a function to handle the click event. I simply increment the current page number.

    angular.module('plunker', ['ui.bootstrap']);
var PaginationDemoCtrl = function($scope) {
  $scope.noOfPages = 20;
  $scope.currentPage = 4;
  $scope.maxSize = 5;

  $scope.setPage = function(pageNo) {
    $scope.currentPage = pageNo;
  };

  $scope.goToNext = function() {
    $scope.currentPage = ++$scope.currentPage;
  };
};
    Login or Signup to reply.
  3. 0

    Link to Plunk

    1. move ng-controller="PaginationDemoCtrl" to body tag.
    2. add directive to button ng-click="setPage(currentPage+1)
    <!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body ng-controller="PaginationDemoCtrl">

    <div>
      <pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
      The selected page no: {{currentPage}}
    </div>

    <button ng-click="setPage(currentPage+1)">Press me</button>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search