Skip to content

Instantly share code, notes, and snippets.

@cvetkovskin
Created September 11, 2019 05:25
Show Gist options
  • Save cvetkovskin/f08c5bbed433f76c69c29ece6afe36c3 to your computer and use it in GitHub Desktop.
Save cvetkovskin/f08c5bbed433f76c69c29ece6afe36c3 to your computer and use it in GitHub Desktop.
<template>
<div class="pagination">
<amp-state id="rowsPerPage">
<script type="application/json">
{{ rowsPerPage }}
</script>
</amp-state>
<amp-state id="totalItems">
<script type="application/json">
{{ totalItems }}
</script>
</amp-state>
<amp-state id="currentPage">
<script type="application/json">
{{ currentPage }}
</script>
</amp-state>
<amp-state id="totalPages">
<script type="application/json">
{{ totalPages }}
</script>
</amp-state>
<amp-state id="startItem">
<script type="application/json">
{{ startItem }}
</script>
</amp-state>
<amp-state id="endItem">
<script type="application/json">
{{ endItem }}
</script>
</amp-state>
<div class="info">
<span [text]="'Showing ' + startItem + ' - ' + endItem + ' out of ' + totalItems + ' movies'">
Showing {{ startItem }} - {{ endItem }} out of {{ totalItems }} movies
</span>
</div>
<div class="controls">
<div
class="button"
:class="{ 'is-disabled': currentPage === 1 }"
[class]="currentPage == 1 ? 'button is-disabled' : 'button'"
on="tap:AMP.setState({ currentPage: currentPage - 1, startItem: startItem - rowsPerPage, endItem: endItem - rowsPerPage })"
role="button"
tabindex="5"
>
<fa-icon class="icon" :icon="['fas', 'chevron-left']" />
</div>
<div class="button">
<div class="button-text" [text]="currentPage">
{{ currentPage }}
</div>
</div>
<div
class="button"
:class="{ 'is-disabled': currentPage === totalPages }"
[class]="currentPage == totalPages ? 'button is-disabled' : 'button'"
on="tap:AMP.setState({ currentPage: currentPage + 1 , startItem: startItem + rowsPerPage, endItem: totalItems < endItem + rowsPerPage ? totalItems : endItem + rowsPerPage })"
role="button"
tabindex="5"
>
<fa-icon class="icon" :icon="['fas', 'chevron-right']" />
</div>
</div>
</div>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment