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

import bottle
bottle.BaseRequest.MEMFILE_MAX = 1024 * 1024

app = Bottle()

@app.route('/')
def index():
    if checkLogged.call():
        from controllers.dashboard.category import get
        return get.call()
    else:
        redirect('/')

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

@app.route('/edit/<id>')
def edit(id):
    if checkLogged.call():
        from controllers.dashboard.category import edit
        return edit.call(id)
    else:
        redirect('/')

@app.route('/delete/<id>')
def delete(id):
    if checkLogged.call():
        from controllers.dashboard.category import delete
        return delete.call(id)
    else:
        redirect('/')

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

#controllers/dashboard/category/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'])
    
    return {'items':categories}

#models/categorydb/paginatedb.py
import setConnection

def call(page, amount):
    cursor, connection = setConnection.call()

    sql = "SELECT * FROM category ORDER BY DATETIME(datetime) DESC, rowid DESC LIMIT ? OFFSET ?"
    cursor.execute(sql, (amount, page*amount))
    categories = cursor.fetchall()
    cursor.close()

    return categories

<!--views/dashboard/index.tpl-->
% rebase('base.tpl')

<link href="/static/styles/partials/header.css" rel="stylesheet"></link>
<script src="/static/scripts/paginate.js"></script>
<section class='Head'>
    <header class='region'>
        <div class='site-logo'>{{ data['siteLogo'] }}</div>

        <form action='/dashboard/search' method='post'>
            <select name="select">
                <option>ការផ្សាយ</option>
                <option>ជំពូក</option>
                <option>សៀវភៅ</option>
                <option>អ្នក​ប្រើប្រាស់</option>
            </select>
            <input type='text' name="q" placeholder="Search" required />
            <input type="submit" value='បញ្ជូន'​ />
        </form>

        <div class='logout'><a href='/dashboard/logout'>ចេញ​ក្រៅ</a></div>
    </header>
</section>

<link href="/static/styles/partials/body.css" rel="stylesheet"></link>
<section class='Body region'>
    %include('dashboard/menu.tpl')

    <%
    if 'index' in data['route']:
        include('dashboard/post.tpl')
    elif 'category' in data['route']:
        include('dashboard/category.tpl')
    end
    %>
</section>

<link href="/static/styles/partials/listing.css" rel="stylesheet"></link>
<section class='Listing region'>
    %if 'count' in data:
        <div class='info'>Total amount of item: {{data['count']}}</div>
    %else:
        <div class='info'>Total amount of item:</div>
    %end

    <div class='items'>
        %if 'items' in data:
        %for item in data['items']:
            <div class='item'>
                <a href="/{{data['route']}}/{{item[3]}}"><img class='thumb' src="{{item[1]}}" /></a>

                <div class='wrapper'>
                    <a href="/{{data['route']}}/{{item[3]}}">{{item[0]}}</a>
                    <p class='date'></p>
                    <script>
                        $('.items .item .date').html(new Date("{{item[2]}}").toLocaleDateString()) 
                    </script>
                </div>
                
                <div class='icon'>
                    <a href='/dashboard/{{data["route"]}}/edit/{{item[3]}}'><img src='/static/images/edit.png' /></a>
                    <a href='/dashboard/{{data["route"]}}/delete/{{item[3]}}'><img src='/static/images/delete.png' /></a>
                </div>
            </div>
        %end
        %end
    </div>

    <script>
        var route = "{{data['route']}}"
    </script>

    <div class='load-more'><img onclick='paginate(route)' src="/static/images/load-more.png" /></div>
</section>

//asset/js/paginate.js
var page = 0

function paginate(route){
    $('.load-more img').attr('src', '/static/images/loading.gif')
    page += 1
    
    $.get(`/dashboard/${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][3]}"><img class='thumb' src="${items[item][1]}" /></a>`
            html += `<div class='wrapper'>`
            html += `<a href="/${route}/${items[item][3]}">${items[item][0]}</a>`
            html += `<p class='date'></p>`
            html += `<script>`
            html += `$('.items .item .date').html(new Date("${items[item][2]}").toLocaleDateString())`
            html += `</script>`
            html += `</div>`
            html += `<div class='icon'>`
            html += `<a href='/dashboard/${route}/edit/${items[item][3]}'><img src='/static/images/edit.png' /></a>`
            html += `<a href='/dashboard/${route}/delete/${items[item][3]}'><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/REST-API

Vercel: https://rest-api-zeta.vercel.app