分頁 - 連續頁的價值觀不加載

Question

我想實現我的Express應用程序分頁：

在我的例子，我從JSON file加載數據。

我app.js文件如下所示：

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 

在我的哈巴狗文件我試圖加載更多的數據：

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') 

我的問題是，如果我使用分頁底部我收到以下網址：http://localhost:8080/?page=#2，但沒有所需的數據。

我創建了一個最小的可行例如回購，我希望我的介紹更好的問題：

Pagination Example

任何建議什麼，我做錯了什麼？

我感謝您的回覆！

Answer 1

這個問題很有可能與Pug中不再支持'屬性插值'有關（參見this link to the Pug docs）。基本上，這歸結爲你不能在屬性值中使用#{...}。你需要這樣做：

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