Pagination by External Inputs

85 of 116
You can use our API to emulate all the native paging actions with your own user inputs.
Result Full HTML CSS JS
Edit Download

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    .zg-body .pager--container {
      display: flex;
      justify-content: flex-start;
      padding: 1rem;
    }

    .zg-body .pager--container button {
      margin: 3px;
    }

    zing-grid[loading] {
      height: 428px;
    }
  </style>
</head>

<body class="zg-body">
  <div class="inner--container">
    <div class="pager--container">
      <button onClick="pager('first');">First Page</button>
      <button onClick="pager('prev');">Prev Page</button>
      <button onClick="pager('next');">Next Page</button>
      <button onClick="pager('last');">Last Page</button>
    </div>
    <zing-grid caption="Movies" pager page-size=5 page-size-options="2,5,20" src="https://zinggrid-examples.firebaseio.com/movies/" layout="row" layout-controls="disabled" viewport-stop>
    </zing-grid>
  </div>
  <script>
    // function declaration
    function pager(type) {
      const zgRef = document.querySelector('zing-grid');
      switch (type) {
        case 'prev':
          zgRef.prevPage();
          break;
        case 'next':
          zgRef.nextPage();
          break;
        case 'last':
          zgRef.lastPage();
          break;
        default:
          zgRef.firstPage();
      }
    }
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></script>
  </head>
  <body class="zg-body">
		<div class="inner--container">
       <div class="pager--container">
         <button onClick="pager('first');">First Page</button>
         <button onClick="pager('prev');">Prev Page</button>
         <button onClick="pager('next');">Next Page</button>
      	 <button onClick="pager('last');">Last Page</button> 
      </div>
       <zing-grid
          caption="Movies" 
          pager
  				page-size=5
    			page-size-options="2,5,20"
          src="https://zinggrid-examples.firebaseio.com/movies/"
      		layout="row"
      		layout-controls="disabled"
          viewport-stop>
      </zing-grid>
		</div>
	</body>
</html>
.zg-body {background:#e6e6e6;}

.zg-body .pager--container {
	display: flex;
  justify-content: flex-start;
  padding:1rem;
}

.zg-body .pager--container button {
  margin: 3px;
}
// function declaration
function pager(type) {
  const zgRef = document.querySelector('zing-grid');
 	switch(type) {
    case 'prev':
      zgRef.prevPage();
      break;
    case 'next':
      zgRef.nextPage();
      break;
    case 'last':
      zgRef.lastPage();
      break;
    default:
      zgRef.firstPage();
  }
}

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Demo Gallery