ទន្ទឹម​នឹង​ការប្រើប្រាស់​ទំរង់​បែបបទ យើង​ក៏​អាច​បញ្ជូន​បណ្តា​ទិន្នន័យ​ទាំងឡាយ​ទៅ​កាន់ server និង​ទទួល​ទិន្នន័យ​ពី server មកវិញ​ តាមរយៈការប្រើប្រាស់​យន្តការ Ajax ។ ហើយ​ដើម្បី​អោយ​មាន​ការងាយ​ស្រួល យើង​អាច​ប្រើប្រាស់​កញ្ចប់ jQuery ក្នុង​ការប្រើប្រាស់​យន្តការ Ajax ។ ដូចនេះ យើង​ចាំបាច់​ត្រូវ​ទាញយក​​កញ្ចប់ jQuery ​មក​ទុក​នៅ​ក្នុង​ថត public ជា​មុន​សិន​។ ការប្រើប្រាស់​យន្តការ Ajax ដោយ​ប្រើប្រាស់​កញ្ចប់ jQuery អាច​ត្រូវ​ធ្វើ​ឡើង​ដូច​ខាង​ក្រោម​នេះ៖

//asset/js/paginate.js
var page = 0
 
function paginate(route){
    $('.load-more img').attr('src', '/static/images/loading.gif')
    page += 1
    
    $.get(`/admin/${route}/paginate/${page}`, function(data, status){
        appendItem(data.items, route)
    })
}
 
function appendItem(items, route){
    var html = ''
    
    if(items){
        for(var item in items){
            html += `<div class='item'>`
            html += `<a href="/${route}/${items[item]['id']}"><img class='thumb' src="${items[item]['thumb']}" />`
            if(items[item]['entries'] !== ''){
                html += `<img class='play-icon' src="/static/images/play.png" />`
            }
            html += `</a>`
            html += `<div class='wrapper'>`
            html += `<a href="/${route}/${items[item]['id']}">${items[item]['title']}</a>`
            html += `<p class='${items[item]['id']}'></p>`
            html += `<script>`
            html += `$('.items .item .${items[item]['id']}').html(new Date("${items[item]['datetime']}").toLocaleDateString())`
            html += `</script>`
            html += `</div>`
            html += `<div class='icon'>`
            html += `<a href='/admin/${route}/edit/${items[item]['id']}'><img src='/static/images/edit.png' /></a>`
            html += `<a href='/admin/${route}/delete/${items[item]['id']}'><img src='/static/images/delete.png' /></a>`
            html += `</div>`
            html += `</div>`
        }
    }
    $('.items').append(html)
    $('.load-more img').attr('src', '/static/images/load-more.png')
}