0
をロードしない:ページネーション - 連続したページの値が、私は特急のアプリケーションでページネーションを実装しようとしています
私の例では、私はJSON fileからデータをロードしています。私は、さらにデータをロードしようとしています私のパグファイル内
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
:
私app.js
ファイルは次のようになります
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)) »
script(src='https://code.jquery.com/jquery-3.1.1.min.js')
script.
script(src='/js/bootstrap.min.js')
私の問題は、私は、下部にページネーションを使用する場合私はhttp://localhost:8080/?page=#2
のURLを取得しましたが、必要なデータはありません。私はここで間違っ
任意の提案をしています何:
私は私が私の問題よりよく説明を願っ最小実行可能な例レポを作成していますか?
返信いただきありがとうございます。
あなたの返信のためのThx!基礎となるコードを変更しましたが、依然として必要なページ分割出力が得られません。なぜそれが動作していないすべての提案? – mrquad
具体的なエラー出力はありますか?または、リンクのURLがまだ間違っていますか? – gandreadis
リンクは '?page =#2、?page =#3、?page =#4 etc.'に変更されましたが、データに変更はありません。さらに、エラーメッセージはありません。私はレポに最新の変更を加えました:https://github.com/marcpre/learning_paginat – mrquad