Pagination is the fact of opening a new page to see more posts. However, before being able to do so, we need to tell Express.js web framework to accept such as object by adding a line of code into the entry point as below:
app.use(express.json())
In fact, the pagination is done by making Ajax post call to a route on the backend:
//static/scripts/paginate.js
let page = 0
function paginate(route){
$('.paginate img').attr('src', '/images/loading.gif')
page += 1
$.post(`${route}/paginate/`,{page:page},function(data, status){
appendItem(data.items,route,data)
})
}
function appendItem(items, route,data){
let html = ''
if(items){
for(let item of items){
html += `<li>`
html += `<div class='thumb'>`
html += `<a href="/${data.type}/${item.id}"><img src="${item.thumb}"/></a>`
html += `</div>`
html += `<div class="title">`
html += `<a href="/${data.type}/${item.id}">${item.title}</a>`
html += `<div>${new Date(item.date).toLocaleDateString('it-IT')}</div>`
html += `</div>`
html += `<div class="edit">`
html += `<a href="${route}/edit/${item.id}"><img src="/images/edit.png"/></a>`
html += `<a href="${route}/delete/${item.id}"><img src="/images/delete.png"/></a>`
html += `</div>`
html += `</li>`
}
}
$('.list').append(html)
if(route === '/admin/user'){
$('.Listing .list li').css({'grid-template-columns':'13% auto 25%'})
$('.Listing .list li .thumb').css({'padding-top':'100%'})
$('.Listing .list li .thumb img').css({'border-radius':'50%'})
}
$('.paginate img').attr('src', '/images/load-more.png')
}
// route/admin/category.js
import express from "express"
const categoryRoute = express.Router()
import category from '../../controller/admin/category.js'
categoryRoute.get('/',async (req,res,next) => {
if(req.session.user){
category.getItem(req,res)
}else{
res.redirect('/login')
}
})
categoryRoute.post('/',async (req,res,next) => {
if(req.session.user){
category.postItem(req,res)
}else{
res.redirect('/login')
}
})
categoryRoute.get('/edit/:id',async (req,res,next) => {
if(req.session.user){
category.getEditItem(req,res)
}else{
res.redirect('/login')
}
})
categoryRoute.post('/edit/:id',async (req,res,next) => {
if(req.session.user){
category.postEditItem(req,res)
}else{
res.redirect('/login')
}
})
categoryRoute.get('/delete/:id',async (req,res,next) => {
if(req.session.user){
category.deleteItem(req,res)
}else{
res.redirect('/login')
}
})
categoryRoute.post('/paginate',async (req,res,next) => {
if(req.session.user){
category.paginate(req,res)
}else{
res.redirect('/login')
}
})
export default categoryRoute
// controller/admin/category.js
import config from '../../config.js'
import categoryDB from '../../model/category.js'
class Category{
constructor(){
(async () => {
this.config = await config()
})()
}
async getItem(req,res){
this.config.pageTitle = 'ទំព័រជំពូក'
this.config.route = '/admin/category'
this.config.type = 'category'
this.config.count = await categoryDB.count(req)
this.config.items = await categoryDB.getItem(req,this.config.maxPosts)
res.render('base',{data:this.config})
}
async postItem(req,res){
await categoryDB.insertItem(req,res)
res.redirect('/admin/category')
}
async getEditItem(req,res){
this.config.pageTitle = 'ទំព័រកែប្រែជំពូក'
this.config.route = '/admin/category'
this.config.type = 'category'
this.config.count = await categoryDB.count(req)
this.config.items = await categoryDB.getItem(req,this.config.maxPosts)
this.config.item = await categoryDB.getEditItem(req)
res.render('base',{data:this.config})
}
async postEditItem(req,res){
await categoryDB.postEditItem(req)
res.redirect('/admin/category')
}
async deleteItem(req,res){
await categoryDB.deleteItem(req)
res.redirect('/admin/category')
}
async paginate(req,res){
this.config.route = '/admin/category'
this.config.type = 'category'
this.config.items = await categoryDB.paginate(req,this.config.maxPosts)
res.json(this.config)
}
}
export default await new Category()
// model/category.js
class Category{
async count(req){
return await req.mydb.collection('categories').countDocuments()
}
async insertItem(req,res){
const id = Date.now() + Math.round(Math.random() * 1E9).toString()
let myCategory = {
id: id,
title: req.body.title,
thumb: req.body.thumb,
date: req.body.datetime
}
await req.mydb.collection("categories").insertOne(myCategory)
}
async getItem(req,amount){
return await req.mydb.collection("categories").find().sort({date:-1,_id:-1}).limit(amount).toArray()
}
async getEditItem(req){
return await req.mydb.collection("categories").findOne({id:req.params.id})
}
async postEditItem(req){
let myquery = {id: req.params.id}
let newvalue = {$set: {
title: req.body.title,
thumb: req.body.thumb,
date: req.body.datetime
}}
await req.mydb.collection("categories").updateOne(myquery,newvalue)
}
async deleteItem(req){
await req.mydb.collection("categories").deleteOne({id: req.params.id})
}
async paginate(req,amount){
const page = req.body.page
return await req.mydb.collection("categories").find().skip(amount*page).sort({date:-1,_id:-1}).limit(amount).toArray()
}
}
export default await new Category()