Demos Back to Docs

Pagination by External Inputs

92 of 124
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 nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></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;
      height: fit-content;
    }

    zing-grid[loading] {
      height: 284px;
    }
  </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="2" page-size-options="2,5,15" src="https://zinggrid-examples.firebaseio.com/movies/" layout="row" layout-controls="disabled" viewport-stop>
    </zing-grid>
  </div>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // 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"></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="2"
    			page-size-options="2,5,15"
          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;
  height: fit-content;
}
// 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();
  }
}

Related Docs

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

Related Docs

Demo Gallery