Pagination Custom Positioning

109 of 116
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-ofitems
Showingitems
Showing-ofrows

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 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;
    }

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

<body class="zg-body">
  <zing-grid page-size=5 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></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">
		<zing-grid
		  page-size=5
    	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;
}

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