Pagination - Values of consecutive pages do not load

Question

I am trying to implement pagination in my express application:

In my example I am loading the data from a JSON file.

My app.js file looks like the following:

const express = require("express")
const path = require("path")
const bodyParser = require("body-parser")
const cookieParser = require('cookie-parser')
const fs = require('fs')
const app = express()

// view engine setup
app.set("views", path.join(__dirname, "views"))
app.set("view engine", "pug")

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
    extended: false,
}))
app.use(express.static(path.join(__dirname, "public")))
app.use(cookieParser())

//Routes
app.get('/', (req, res) => {

    const data = JSON.parse(fs.readFileSync('./data/data.json', 'utf8')); 

    //pagination
    const totalRec = Object.keys(data).length
    const pageSize = 6
    const pageCount = Math.ceil(totalRec / pageSize)
    const start = 0
    const currentPage = 1

    if (currentPage > 1) {
        start = (currentPage - 1) * pageSize;
    }

    console.log("pageCount: " + pageCount + " totalRec: " + totalRec + " start: " + start)

    const postList = data.slice(start, start+pageSize)
    console.log("postList: " + postList)    

    res.render("index", {
        postList,
        totalRec,
        pageSize,
        pageCount,
        start,
        currentPage
    })
})

//Server
const port = process.env.APP_PORT || 8080
const host = process.env.APP_HOST || "localhost"

app.listen(port, function () {
    console.log("Listening on " + host + ":" + port)
})

module.exports = app

Within my pug file I am trying to load further data:

  body
    .container-fluid
      .row
        .col-md-12
          h3
            | Mentoring 1
          a.btn.btn-primary(href='/new', role='button')
            | Create Post
          table.table
            thead.thead-inverse
              tr
                th Titel
                th Description
                th Created At
                th Tags
                th Action
            tbody
              //TODO: If post is empty
              each post in postList
                tr
                  td= post.titel
                  td= post.description
                  td= post.createdAt
                  td= post.tags
                  td
                    a.btn.btn-primary(href='/edit', role='button') Edit                     
          if pageCount > 1
            ul.pagination
              if currentPage > 1
                li
                  a(href='/?page=1')  «
              - var x = 1
              if currentPage > 5
                - x = x + (currentPage - 4)
              if (x !== 1)
                li.disabled
                  a(href='#') ...
              - for (x; x <= pageCount; x++)
                if( currentPage == x)
                  li.active
                    span.sr_only
                      = currentPage
                else
                  li
                    a(href= "/?page=#" + x )
                      = x
                if x == (currentPage + 4)
                  li.disabled
                    a(href="#") ...
                    - break
              if currentPage != pageCount
                li
                  a(href= "/?page=" + Math.floor(pageCount) ) &raquo;

      script(src='https://code.jquery.com/jquery-3.1.1.min.js')
      script.        

         script(src='/js/bootstrap.min.js')   

My Problem is that if I use the pagination on the bottom I get the following URL back, http://localhost:8080/?page=#2, but no required data.

I have created a minimum viable example repo, which I hope describes my problem better:

Pagination Example

Any suggestions what I am doing wrong here?

I appreciate your reply!

Answer 1

The problem is most likely related to 'attribute interpolation' not being supported anymore in Pug (see this link to the Pug docs). Basically, what this comes down to is that you can't use #{...} in attribute values anymore. You'll need to do something like this:

a(href= "/?page=" + Math.floor(pageCount) ) »