ការចុះលេខទំព័រស្តាទិកក៏មិនខុសគ្នាពីការចុះលេខទំព័រដទៃទៀតដែរ គឺត្រូវយកចំនួនសរុបទាំងអស់នៃទិន្នន័យនៃទំព័រស្តាទិកមកចែកនឹងចំនួនទំព័រស្តាទិកសំរាប់ទំព័រនិមួយៗ។ ការចែកនេះត្រូវធ្វើឡើងដោយការយកក្បួនគណិតវិទ្យា Math.ceil( ) នៅក្នុងកញ្ចប់ ES6 មកប្រើ។ ប្រមាណវិធីនេះបានធ្វើឡើងនៅក្នុងឯកសារ index.astro នៅក្នុងថត src/pages/admin/page ។
<!--src/pages/admin/page/index.astro-->
---
import Base from "../../../layouts/admin/Base.astro"
import Page from "../../../layouts/admin/Page.astro"
const { userAuth, prisma, setting } = Astro.locals
if(!userAuth?.userId){ return Astro.redirect('/login') }
import page from "../../../data/page.js"
const total = await page.count({prisma})
const numberPage = Math.ceil(total/setting.adminItems)
const currentPage = Astro.url.searchParams.get('page') || ''
const pagination = {total, numberPage, currentPage}
if(currentPage){
var items = await page.paginate({prisma, currentPage}, setting.adminItems)
}else{
var items = await page.getItems({prisma}, setting.adminItems)
}
const pages = items.map((page)=>{page.date = new Date(page.date).toLocaleDateString('it-IT')
return page })
---
<Base pageTitle="ទំព័រស្តាទិក" pagination={pagination} items={pages} type="page">
<Page/>
</Base>
សំណុំទិន្នន័យសំរាប់ដាក់លេខទំព័រ pagination ដែលនៅក្នុងនោះមានទិន្នន័យ total, numberPage, currentPage ត្រូវបានផ្តល់អោយទៅគ្រឹះនៃគំរូទំព័រ Base.astro ដែលនឹងផ្តល់ទិន្នន័យនេះជាបន្តទៅទៀតអោយទៅគំរូទំព័រផ្នែកខាងក្រោម Bottom.astro ។
<!--src/layouts/admin/Bottom.astro-->
---
const { pagination=0, items=[], type='post' } = Astro.props
---
<section class="max-w-5xl mx-auto md:px-0 px-2">
<div class="text-center bg-teal-100 mt-2 py-2">
ទាំងអស់មានចំនួនៈ {pagination.total}
</div>
<ul id="item-listing" class="grid md:grid-cols-2 grid-cols-1 gap-2 py-2 text-gray-600">
{items.map((item, i)=>(
<li class="bg-teal-100 grid grid-cols-[20%_60%_15%] gap-x-2 items-center group">
<a class="relative pt-[56.25%] overflow-hidden" href={"/"+type+"/"+item.id}>
<img class="absolute top-0 left-0 w-full min-h-full"
src={item.thumb}
/>
{item.videos &&
<img class="absolute top-1/2 left-1/2 min-h-auto w-1/4 -translate-x-1/2 -translate-y-1/2"
src="/images/play.png"
/>
}
</a>
<div class="truncate">
<a href={"/"+type+"/"+item.id}>
{item.title}
</a>
<div>{item.date}</div>
</div>
<div class="flex flex-row">
<a class="edit block w-1/2" href={"/admin/"+type+"/"+item.id}>
<img class="invisible group-hover:visible" src="/images/edit.png" />
</a>
<a class="delete block w-1/2" href={"/api/admin/"+type+"/delete/"+item.id}>
<img class="invisible group-hover:visible" src="/images/delete.png" />
</a>
</div>
</li>
))}
<script>
$('#item-listing .delete').on('click', function () {
return confirm('តើពិតជាចង់លុប?')
})
</script>
</ul>
<div class="bg-teal-100 py-2 mb-5">
<span class="flex justify-center">
<span>ទំព័រ </span>
<select id="page" class="border border-black pl-1" data-page={pagination.currentPage}>
{pagination.numberPage &&
<>
{[...Array(pagination.numberPage).keys()].map(number => (<option>{++number}</option>))}
</>
}
</select>
<span>នៃ {pagination.numberPage}</span>
</span>
<script>
$('#page').on('change', () => {
window.location.href = "/admin/?page="+$( "#page option:selected" ).text()
})
const changeSelected = (e) => {
const text = $('#page').attr('data-page')
const $select = document.querySelector('#page')
const $options = Array.from($select.options)
if(text){
const optionToSelect = $options.find(item => item.text === text)
optionToSelect.selected = true
}
const page = $( "#page option:selected" ).text()
$('.edit').each(function(){
const link = $(this).attr('href')+"?page="+page
$(this).attr('href', link)
})
$('.delete').each(function(){
const link = $(this).attr('href')+"?page="+page
$(this).attr('href', link)
})
const url = $('#form').attr('action')+"?page="+page
$('#form').attr('action', url)
}
changeSelected()
</script>
</div>
</section>
Netlify: https://khmerweb-dynamic-blog.netlify.app/admin/page
