#routes/backend/category.py
from bottle import Bottle, redirect
from controllers.frontend.login import checkLogged

app = Bottle()

@app.route('/')
def get():
    if checkLogged.call():
        from controllers.backend.categories import get
        return get.call()
    else:
        redirect('/login')

@app.route('/', method="post")
def create():
    if checkLogged.call():
        from controllers.backend.categories import create
        return create.call()
    else:
        redirect('/login')

@app.route('/edit/<id>')
def create(id):
    if checkLogged.call():
        from controllers.backend.categories import edit
        return edit.call(id)
    else:
        redirect('/login')

@app.route('/delete/<id>')
def create(id):
    if checkLogged.call():
        from controllers.backend.categories import delete
        return delete.call(id)
    else:
        redirect('/login')

@app.route('/paginate/<page>')
def create(page):
    if checkLogged.call():
        from controllers.backend.categories import paginate
        return paginate.call(int(page))
    else:
        redirect('/login')

#controllers/backend/categories/paginate.py
import config
from bottle import request
from copy import deepcopy
from models.categorydb import paginatedb

def call(page):
    kdict = deepcopy(config.kdict)
    categories = paginatedb.call(page, kdict['maxItemList'])
    items = [category for category in categories]
    
    return {'items':items}

#models/categorydb/paginatedb.py
import setConnection

def call(page, amount):
    mycol = setConnection.call("categories")

    categories = mycol.find({},{"_id":0}).skip(page*amount).sort([("datetime", -1), ("_id", -1)]).limit(amount)

    return categories

//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(('entries' in items[item]) && (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')
}

GitHub: https://github.com/Sokhavuth/khmerweb-multimedia

Vercel: https://khmerweb-multimedia.vercel.app/