javascript 44 lines · 7 steps

Building a paginated orders page in Express

An Express route reads a page number, queries a slice of orders, and renders a full pagination model for the view.

Explained by highlit

Express Intermediate pagination routing sql-queries error-handling server-side-rendering

1const express = require('express');
2const router = express.Router();
3const db = require('../db');
4 
5const PER_PAGE = 20;
6 
7router.get('/orders', async (req, res, next) => {
try {
  const page = Math.max(1, parseInt(req.query.page, 10) || 1);
  const offset = (page - 1) * PER_PAGE;
11 
  const [{ count }] = await db('orders').count({ count: '*' });
  const totalPages = Math.max(1, Math.ceil(count / PER_PAGE));
14 
  const orders = await db('orders')
    .select('orders.id', 'orders.total', 'orders.status', 'orders.created_at', 'customers.name as customer')
    .join('customers', 'customers.id', 'orders.customer_id')
    .orderBy('orders.created_at', 'desc')
    .limit(PER_PAGE)
    .offset(offset);
21 
  res.render('orders/index', {
    title: 'Orders',
    orders,
    pagination: {
      page,
      totalPages,
      hasPrev: page > 1,
      hasNext: page < totalPages,
      prevUrl: `/orders?page=${page - 1}`,
      nextUrl: `/orders?page=${page + 1}`,
      pages: Array.from({ length: totalPages }, (_, i) => ({
        number: i + 1,
        url: `/orders?page=${i + 1}`,
        current: i + 1 === page,
      })),
    },
  });
} catch (err) {
  next(err);
}
42});
43 
44module.exports = router;

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Clamping and coercing user input keeps pagination math safe from bad query strings.
2Precomputing a full pagination model on the server keeps templates dumb and declarative.
3Wrapping async handlers in try/catch and forwarding to next() routes errors through Express middleware.

Related explainers

rust

use serde::Deserialize;
 
#[derive(Debug, Deserialize)]
#[serde(untagged)]

Parsing flexible JSON shapes with serde

deserialization enums json

Intermediate 6 steps

ruby

require "shellwords"
require "open3"
 
module Backup

Building safe shell commands in Ruby

shell-out subprocess command-injection

Intermediate 7 steps

javascript

function evaluate(expression) {
  const tokens = tokenize(expression);
  let pos = 0;

Building a recursive descent calculator

parsing recursion operator-precedence

Intermediate 8 steps

javascript

import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks

Advanced 10 steps

rust

use chrono::{Duration, NaiveDate};
 
#[derive(Debug)]
pub struct DateRange {

Parsing and iterating date ranges in Rust

error-handling iterators parsing

Intermediate 7 steps

javascript

import { useEffect, useRef, useState } from 'react';
 
export function useDelayedFlag(active, delay = 300) {
  const [visible, setVisible] = useState(false);