Demos Back to Docs

Pagination - Custom Positioning

116 of 124
You can use our <zg-pager> web component to place the pager controls wherever you want inside the grid. This flexibility allows you to move and style the controls however you want.
Result Full HTML CSS JS
Edit Download
Showing - of items
Showing items
Showing - of rows

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 zing-grid[loading] {
      height: 400px;
    }

    .zg-body zg-caption {
      background: inherit;
      border-bottom: 1px solid #c0c0c0;
    }

    .zg-body .caption-pager--container,
    zg-footer {
      display: flex;
      justify-content: space-between;
    }

    .zg-body zg-footer {
      border-top: 1px solid #c0c0c0;
      padding: 1rem;
      font-size: var(--zg-caption-font-size, 1.25rem);
    }

    .zg-body zg-footer zg-icon {
      font-size: 1.25rem;
    }

    .zg-body zg-text,
    span {
      color: black;
    }

    @media (max-width: 600px) {

      .zg-body zg-caption,
      .zg-body zg-footer {
        font-size: 0.9rem;
      }
    }

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

<body class="zg-body">
  <zing-grid page-size="3" page-size-options="2,5,20" page-size-card="2" src="https://zinggrid-examples.firebaseio.com/movies/" layout="row" layout-controls="disabled" viewport-stop>
    <zg-caption>
      <div class="caption-pager--container">
        <div>
          <span>Showing</span>
          <zg-text value="startrow"></zg-text>
          <span>-</span>
          <zg-text value="endrow"></zg-text>
          <span>of</span>
          <zg-text value="rowcount"></zg-text>
          <span>items</span>
        </div>
        <div>
          <span>Showing</span>
          <zg-select action="pagesize" options="3, 6, 9"></zg-select>
          <span>items</span>
        </div>
      </div>
    </zg-caption>

    <zg-footer>
      <div>
        <span>Showing</span>
        <zg-text value="currpage"></zg-text>
        <span>-</span>
        <zg-text value="pagecount"></zg-text>
        <span>of</span>
        <zg-text value="pagecount"></zg-text>
        <span>rows</span>
      </div>
      <div>
        <zg-button action="prevpage"></zg-button>
        <zg-text value="currpage"></zg-text>
        <zg-button action="nextpage"></zg-button>
      </div>
    </zg-footer>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </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">
		<zing-grid
		  page-size="3"
    	page-size-options="2,5,20"
    	page-size-card="2"
		  src="https://zinggrid-examples.firebaseio.com/movies/"
      layout="row"
      layout-controls="disabled"
      viewport-stop>
		  <zg-caption>
		    <div class="caption-pager--container">
		      <div>
   		      <span>Showing</span>
    		    <zg-text value="startrow"></zg-text>
  		      <span>-</span>
  		      <zg-text value="endrow"></zg-text>
   		      <span>of</span>
   		      <zg-text value="rowcount"></zg-text>
   		      <span>items</span>
		      </div>
		      <div>
		        <span>Showing</span>
		        <zg-select action="pagesize" options="3, 6, 9"></zg-select>
		        <span>items</span>
		      </div>
		    </div>
		  </zg-caption>

		  <zg-footer>
		    <div>
 		      <span>Showing</span>
 		      <zg-text value="currpage"></zg-text>
 		      <span>-</span>
 		      <zg-text value="pagecount"></zg-text>
 		      <span>of</span>
 		      <zg-text value="pagecount"></zg-text>
 		      <span>rows</span>
		    </div>
        <div>
          <zg-button action="prevpage"></zg-button>
          <zg-text value="currpage"></zg-text>
          <zg-button action="nextpage"></zg-button>
        </div>
		  </zg-footer>
		</zing-grid>
	</body>
</html>
.zg-body zing-grid[loading] {
  height: 400px;
}

.zg-body zg-caption {
  background: inherit;
  border-bottom: 1px solid #c0c0c0;
}

.zg-body .caption-pager--container,
zg-footer {
  display: flex;
  justify-content: space-between;
}

.zg-body zg-footer {
  border-top: 1px solid #c0c0c0;
  padding: 1rem;
  font-size: var(--zg-caption-font-size,1.25rem);
}

.zg-body zg-footer zg-icon {
  font-size: 1.25rem;
}

.zg-body zg-text, span {
  color: black;
}

@media (max-width: 600px) {
  .zg-body zg-caption,
  .zg-body zg-footer {
    font-size: 0.9rem;
  }
}
// No JS code

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