RhenCloud/Cloud-Blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add total page count in pagination

Browse Source 
Signed-off-by: nurRiyad <asadnurriyad@gmail.com>
This commit is contained in:
nurRiyad
2023-08-05 01:30:29 +06:00
parent 47b6a1f456
commit 764c582a54
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
pages/blogs/index.vue
View File

@@ -36,14 +36,14 @@ function onPreviousPageClick() {
pageNumber.value -= 1 pageNumber.value -= 1
} }
const isNextpageAvailable = computed(() => { const totalPage = computed(() => {
if (pageNumber.value * elementPerPgae.value <= formatedData.value.length) const ttlContent = formatedData.value.length || 0
return true const totalPage = Math.ceil(ttlContent / elementPerPgae.value)
else return false return totalPage
}) })
function onNextPageClick() { function onNextPageClick() {
if (isNextpageAvailable.value) if (pageNumber.value < totalPage.value)
pageNumber.value += 1 pageNumber.value += 1
} }
@@ -90,9 +90,9 @@ useHead({
<button :disabled="pageNumber <= 1" @click="onPreviousPageClick"> <button :disabled="pageNumber <= 1" @click="onPreviousPageClick">
<Icon name="mdi:code-less-than" size="30" :class="{ 'text-sky-700': pageNumber > 1 }" /> <Icon name="mdi:code-less-than" size="30" :class="{ 'text-sky-700': pageNumber > 1 }" />
</button> </button>
<p>{{ pageNumber }}</p> <p>{{ pageNumber }} / {{ totalPage }}</p>
<button :disabled="!isNextpageAvailable" @click="onNextPageClick"> <button :disabled="pageNumber >= totalPage" @click="onNextPageClick">
<Icon name="mdi:code-greater-than" size="30" :class="{ 'text-sky-700': isNextpageAvailable }" /> <Icon name="mdi:code-greater-than" size="30" :class="{ 'text-sky-700': pageNumber < totalPage }" />
</button> </button>
</div> </div>
</main> </main>