Question

我正在尝试在我的快速申请中实施分页：

在我的示例中，我正在加载来自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

在我的pug文件中，我正在尝试加载更多数据：

  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')  &laquo;
              - 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) ) &raquo;

分页 - 连续页面的值无法加载

1 个答案: