ការដាក់លេខទំព័រដែលភាសាអង់គ្លេសហៅថា pagination គឺជាការចែកបណ្តុំទិន្នន័យជាទំព័រ ហើយនៅក្នុងទំព័រនិមួយៗ អាចមានចំនួនការផ្សាយអាស្រ័យទៅតាមការកំណត់របស់អ្នកនិពន្ធដែលមានតួនាទីជា Admin ។ ចំនួនទំព័រគឺជាផលចែករវាងចំនួនការផ្សាយទាំងអស់នឹងចំនួនកំណត់នៃការផ្សាយសំរាប់ទំព័រនិមួយៗ។ ឧទាហរណ៍ បើការផ្សាយទាំងអស់មានចំនួន 100 និងចំនួនកំណត់នៃការផ្សាយសំរាប់ទំព័រនិមួយៗគឺ 10 ដូចនេះផលចែករវាងលេខទាំងពីរនេះគឺ 100/10 = 10 ទំព័រ។ បើមានសំណល់ក៏ត្រូវគិតថាមួយទំព័រដែរដូចជា 101/10 = 11 ទំព័រ។ លេខចែករបៀបនេះបានមកពីក្បួនគណិតវិទ្យា Math.ceil( ) នៅក្នុងកញ្ចប់ JavaScript ។
ការរាប់ចំនួនការផ្សាយសរុបត្រូវធ្វើឡើងដោយវិធី count( ) នៅក្នុងកញ្ចប់ Prisma ដែលត្រូវបានបង្កើតឡើងនៅក្នុងតម្រា src/data/post.js ។
// src/data/post.js
class Post{
async count(req, query={}){
return await req.prisma.post.count(query)
}
...
}
ការបង្កើតលេខទំព័រធ្វើឡើងដោយយោងទៅតាមចំនួនទំព័រសរុបបានមកពីផលចែកខាងដើម និងបំបែកវាអោយទៅជាកំរងទិន្នន័យមួយដែលនៅក្នុងនោះ ធាតុនិមួយៗជាលេខសំរាប់ទំព័រនិមួយៗ។
<!--src/layouts/admin/Bottom.astro-->
...
<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>
ការស្រង់យកទិន្នន័យសំរាប់ទំព័រនិមួយៗ ធ្វើឡើងដោយអាស្រ័យទៅតាមលេខរបស់ទំព័រទិន្នន័យ គឺត្រូវយកលេខទំព័រមកគុននឹងចំនួនការផ្សាយសំរាប់ទំព័រនិមួយៗ។ បើលេខទំព័រគឺ 3 និងចំនួនទិន្នន័យសំរាប់ទំព័រនិមួយៗគឺ 10 ដូចនេះយើងត្រូវរំលងទិន្នន័យចំនួន 10*(3-1) នៅក្នុងមូលដ្ឋានទិន្នន័យ MongoDB មុននឹងស្រង់យកទិន្នន័យសំរាប់ទំព័រលេខ 3 នេះ។
// src/data/post.js
class Post{
...
async paginate(req, amount){
const posts = await req.prisma.post.findMany({
orderBy: [{ date: "desc" }, { id: "desc" }],
skip: amount * (parseInt(req.currentPage) - 1),
take: amount
})
return posts
}
...
}
